4
私はアニメーション化するいくつかのアニメーション をトリガしなければならないことをしたい、私はいけない、同じ時間内のすべての要素をアニメーションであります同じ時間内にすべてのアニメーション角度2アニメーションは、私はそれぞれのdivまたは何ボタンの例えばクラス</p> <p>で要素をアニメーション化する
**は私が唯一の選択された要素をアニメーション化することを望む** **
ことを望んでいないではない、特定**
、これはコード
// ************************ home.component.tsです************************* //
import { Component, OnInit, trigger, state, style, animate, keyframes,
transition } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-
browser/animations';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
animations: [
trigger('focusPannel', [
state('inactive', style({
transform: 'scale(1)',
backgroundColor: '#eee',
})),
state('active', style({
position : 'fixed',
transform: 'translate(0px, 0px)',
top: '0px',
left: '0px',
backgroundColor: 'purple',
color : 'white',
width : '100vw',
height : '100vh'
})),
transition('inactive => active', animate('4000ms ease-in')),
transition('active => inactive', animate('4000ms ease-out'))
])
]
})
export class HomeComponent implements OnInit {
state: string = 'inactive';
constructor() { }
toggleMove() {
console.log('clicked');
this.state = (this.state === 'inactive' ? 'active' : 'inactive');
}
// this func take an event on click
gallery(id) {
alert(id);
}
ngOnInit() {
}
}
// ************** ********** home.component.html *********************** //
<div id="test" class="col s12 m4 l4 ">
<button (click)="toggleMove()" class="waves-effect waves-light
btn">Press me for animation</button>
</div>
<div class="content" (click)="toggleMove()" [@focusPannel]='state'>animated div 1</div>
<div class="content2" (click)="toggleMove()" [@focusPannel]='state'>animated div 2</div>
// *********************** home.component.css ******************あなたの助けのための//
.content{
padding: 20px;
background: #eeeeee;
position: absolute;
left: 300px;
}
.content2{
padding: 20px;
background: #eeeeee;
position: absolute;
left: 500px;
}
のthnxのTIEP – George