angular-animations

Pause Angular Animations

由 ￡可爱￡侵袭症＋ 提交于 2019-12-11 02:19:56
问题 Is it possible to pause animations in Angular 2+? I would like to pause an animation upon mousing over an element and resume the animation from where it left off when mousing out. I have created a simple script to demonstrate: https://stackblitz.com/edit/scrolling-text Here's my component: import { Component, ElementRef, ViewChild } from '@angular/core'; import { trigger, state, style, animate, transition } from '@angular/animations'; @Component({ selector: 'my-app', template: ` <div class=

Integrate AOS library with Angular4 application

由 南楼画角 提交于 2019-12-10 13:42:55
问题 I am working on Angular 4.4.6 application and I want to implement some animations on scroll using the awesome plugin AOS my code: app.component.ts import * as AOS from 'aos'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], encapsulation:ViewEncapsulation.None }) export class AppComponent implements OnInit { ngOnInit(){ AOS.init(); } } app.component.html <div class="box" data-aos="slide-left"> <img src="assets/imgs/seo.png" alt=""> <

How to conditionally add animations in Angular 2

由 一世执手 提交于 2019-12-08 15:07:32
问题 I have a form component that has fields, some fields I want to animate when they appear in the form, but not every field. <div *ngFor="let field of form.Fields"> <div [ngSwitch]="field.Type" [@slideOut]> <!-- more field stuff --> </div> </div> With other attributes I can do something like this [attr.required]="field.Required" But [attr.@slideOut] doesn't seem to work. Ideally I would like to have an animation property on my field so I could pass in animations like this [@field.Animation] but

Angular 4 Animation won't trigger on route change

由 为君一笑 提交于 2019-12-08 12:13:46
问题 I've created the following animation in my Angular 4 project: import { trigger, state, style, transition, animate } from '@angular/animations'; export function slide() { return trigger('slide', [ transition('void => *', [ style({opacity: 0}), style({transform: 'translateX(100%)'}), animate('1s ease-in-out', style({transform: 'translateX(0%)', opacity: 1})) ]), transition('* => void', [ style({opacity: 0}), style({transform: 'translateX(100%)'}), animate('1s 2s ease-in-out', style({transform:

Angular Flip Animation

由 ε祈祈猫儿з 提交于 2019-12-08 08:09:42
问题 I'm attempting to make a flip animation in Angular. It should flip over the Y-axis when clicked, then flip back over the Y-axis in the reverse direction when clicked again. Additionally, it should have front-side and back-side content that is displayed depending on the flip state. The back-to-front flip is giving me grief. I'm getting odd behavior depending on what I try. The best I have been able to do is a weird flip which starts in the same direction as the front-to-back flip, then it

Angular animate before routing

由 浪尽此生 提交于 2019-12-08 06:51:17
问题 In my current project I'm trying to get rid of Angular animations skipping when routing. In my template I have got different "widgets" with mat-card in a css-grid layout which I want to make appear and disappear smoothly. My animations in the child component (to which the route points to) are looking like animations: [ trigger('cardAnimation', [ state('void', style({ opacity: 0, transform: 'scale(0.5)' })), state('*', style({ opacity: 1, transform: 'scale(1)' })), transition('void => *',

Can we implement advance transitions/animations with angular 4?

由 ε祈祈猫儿з 提交于 2019-12-06 13:30:14
I need to implement animations only with angular 4. Below is a sample advance animation that would like to implement. Tried and I couldn't write parallel div animations with angular4. Because with parallel div animations this could achieve via CSS also I believe with angular4 also. So if anyone knows how to write please provide any hint or code. Note: I need to include it into router transition just as the example. Animation Sample A way to do this is to use the transition alias :enter to trigger the animation when the component loads, and then you can use the animations states, so when you

Angular 4 animation for fade in and out a view

由 泪湿孤枕 提交于 2019-12-06 11:29:16
问题 I just want the view to fade in and out on route change. I have setup the component correctly it seems but need to get the animation syntax correct I think. This is my current animation attempt. I import this animation to my component: import {trigger, state, animate, style, transition} from '@angular/animations'; export function routerTransition() { return fadeInAndOut(); } function fadeInAndOut() { return trigger('routerTransition', [ transition(':enter', [ style({opacity: 0}), animate(3000

Angular 4 animate parent and child components at the same time

由 孤者浪人 提交于 2019-12-06 02:21:43
问题 I've written plunk to illustrate my issue: LINK I need to animate parent component, and at the same time I want to make some animation in child component. It seems that angular is blocking animation on child component, and then simply jumps states after parent animation ends without any transition. Is there any way to make animations work in parallel, or at least chain without using callbacks? @Component({ selector: 'outer', template: ` <div [@state]="state" (mouseenter)="state='wide'"

Angular 4 Dynamic Height Animation Reverts After Animation

由 江枫思渺然 提交于 2019-12-05 21:07:23
I'm working with Angular4 and their animation. I'm trying to pass dynamic values to an animation declaration but it revers to it's original state after the animation finishes. Basically, I have a dynamic height that will then trigger the animation based on that height. I'd like to make this work without bootstrap, or flat out css3 approaches and do it in angular's animation. Below is the animation definition export const deltaScore = trigger( "deltaScore", [ state("void", style({ height: "*" } ) ), state('*', style({ height: "*" })), state('update', style({ height: "{{height}}" })), transition
订阅 angular-animations