How to give class name to animation state in angular 2/4?
来源： https://stackoverflow.com/questions/46097379/how-to-give-class-name-to-animation-state-in-angular-2-4
angular2-animation
How to give class name to animation state in angular 2/4?
来源： https://stackoverflow.com/questions/46097379/how-to-give-class-name-to-animation-state-in-angular-2-4
Multiple animation triggers in angular2 Component
问题 I would like to define multiple animation triggers in one component. Is this possible? For example one for entering the scene and one for hover. Or do I need to define two components (parent child) for this case? item.compoennt.ts // removed the import and class part for better readability @Component({ selector: 'item', templateUrl: './item.template.html', styleUrls: ['./item.style.scss'], animations: [ // page load animation trigger('slideIn', [ state('in', style({ opacity: 1, transform:
Angular 2 Animation - boolean trigger?
问题 I'm trying to trigger a transition bound to a boolean property, but this doesn't seem to fire. Here is a cut down version of my animation trigger trigger( 'trueFalseAnimation', [ transition('* => true', [ style({backgroundColor: '#00f7ad'}), animate('2500ms', style({backgroundColor: '#fff'})) ]), transition('* => false', [ style({backgroundColor: '#ff0000'}), animate('2500ms', style({backgroundColor: '#fff'})) ]) ] ) HTML: <div [@trueFalseAnimation]="model.someProperty">Content here</div> To
Angular 2 Animation - boolean trigger?
问题 I'm trying to trigger a transition bound to a boolean property, but this doesn't seem to fire. Here is a cut down version of my animation trigger trigger( 'trueFalseAnimation', [ transition('* => true', [ style({backgroundColor: '#00f7ad'}), animate('2500ms', style({backgroundColor: '#fff'})) ]), transition('* => false', [ style({backgroundColor: '#ff0000'}), animate('2500ms', style({backgroundColor: '#fff'})) ]) ] ) HTML: <div [@trueFalseAnimation]="model.someProperty">Content here</div> To
Choppy angular animations in firefox (intergrating web animations js in angular project)
问题 What is the proper way of integrating web animations js in an angular 2 project? I have done the necessary steps provided here. But the animations in firefox are still choppy. I have created a new angular project using the latest angular cli (version: 1.0.3) and downgraded angular version by editing dependencies in package.json. The animation is working properly in chrome. Is there something I'm missing here? Package.json - "dependencies": { "@angular/common": "~2.4.1", "@angular/compiler": "
Angular 4 Changes based on view
问题 I have a div which is like <div [ngClass]="{'active' : isActive} [ngStyle]={top: topVar } > isActive and topVar are calculated based on the view, (like if the content overflowed, and the content is dynamic). so I calculate them in ngAfterViewChecked. which ofcourse gives me this error : Expression has changed after it was checked, previous value : "undefined". current value : '636px'. I understand what I did wrong, my question is, how to do it right? (If I calculate the the vars based on the
Angular 2 animate a specific targeted element
问题 I have 2 components: One which contain a router-outlet where will be injected pages with a question and 3 possible answers Second that is a sort of preview, that contains 20 boxes I use a shared service(BehaviorSubject) for components communication WHAT I DO IS THIS: when user choose an answer from /question1 route, I use the service to emit a unique value(every answer have a unique value) in the preview component I've subscribed to whatever service emits, and I know exactly what question is
Angular 2 - pass delay to component animation as input parameter
问题 I want to pass in the delay of a component's animation from the html eg: html: <circles[delay]="'10000ms'"></circles> ts: @Component({ selector: 'circles', templateUrl: 'app/landing-page/subcomponents/circles.component.html', styleUrls: ['app/landing-page/subcomponents/circles.component.css'], animations: [ trigger('flyIn', [ state('in', style({ transform: 'translateY(0)', opacity: 1 })), transition('void => *', [ style({ transform: 'translateY(-100%)', opacity: 0 }), animate("1000ms" + this
Angular 2 Animation - boolean trigger?
I'm trying to trigger a transition bound to a boolean property, but this doesn't seem to fire. Here is a cut down version of my animation trigger trigger( 'trueFalseAnimation', [ transition('* => true', [ style({backgroundColor: '#00f7ad'}), animate('2500ms', style({backgroundColor: '#fff'})) ]), transition('* => false', [ style({backgroundColor: '#ff0000'}), animate('2500ms', style({backgroundColor: '#fff'})) ]) ] ) HTML: <div [@trueFalseAnimation]="model.someProperty">Content here</div> To test: ngOnInit() { setTimeout(() => { this.model.someProperty = true; setTimeOut(() => { this.model