angular-animations

问题 In my Angular 5 application, the user may navigate to a route which uses the same route, but with different parameters. For example, they may navigate from /page/1 to /page/2 . I want this navigation to trigger the routing animation, but it doesn't. How can I cause a router animation to happen between these two routes? (I already understand that unlike most route changes, this navigation does not destroy and create a new PageComponent . It doesn't matter to me whether or not the solution

问题 In my Angular 5 application, the user may navigate to a route which uses the same route, but with different parameters. For example, they may navigate from /page/1 to /page/2 . I want this navigation to trigger the routing animation, but it doesn't. How can I cause a router animation to happen between these two routes? (I already understand that unlike most route changes, this navigation does not destroy and create a new PageComponent . It doesn't matter to me whether or not the solution

问题 The spec of SVGSVGElement contains methods like pauseAnimations() or unpauseAnimations() . But how can I get access these methods in Angular 9? Or how can I pause/resume a SVG path animations? <svg id="rootSVG" width="500" viewBox="50 0 700 400" xmlns="http://www.w3.org/2000/svg"> <svg:circle r="10" fill="white" id="white"> <svg:animateMotion id="innerTrack" [attr.dur]="durationInner" begin="indefinite" repeatCount="0" calcMode="linear" [attr.path]="innerPath" (begin)="status()" /> </svg

问题 I'm working on a bigger app, where we are using lazy loading for modules. After we load a module, then in some cases a component get rendered to a <ng-container><ng-container> . The problem is, the animation which is defined on container is not getting called. I've created a dummy stackblitz example to demonstrate what I mean: link app.component.html: <ng-container *ngIf="visible" [@myAnimation]> <hello [ngStyle]="{'top': '50px'}" name="not animated"></hello> </ng-container> <hello name=

问题 I would like to be able to shrink an HTML tag to make it disappear, and have a smooth disappearance for the remaining items (so that they don't jump where the tag used to be) const div = document.querySelector('.toGo'); div.addEventListener('click', event => { div.className += ' animate'; // Simulate Angular's DOM modification setTimeout(() => div.style.display = 'none', 1100); setTimeout(() => div.style.display = 'block', 1200); setTimeout(() => div.className = 'toGo', 1300); }); .toGo,

问题 I created an element ( div.parent ) with an Angular animation that worked great. When I add a child element to it and try to animate the child at the same time, one of the animations doesn't end up running (it just snaps to the new state). Stackblitz: https://stackblitz.com/edit/angular-2tbwu8 Markup: <div [@theParentAnimation]="state" class="parent"> <div [@theChildAnimation]="state" class="child"> </div> </div> Animations: trigger( 'theParentAnimation', [ state( 'down', style( { transform:

问题 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: "*"

问题 Basically, I want to make use of the web-animations-api polyfill in angular (4 currently) to perform infinite animations on elements. Let's see a basic non-angular example: var ball = document.getElementById('ball'); ball.animate([ { transform: 'scale(0.5)' }, { transform: 'scale(1)' } ], { duration: 1000, iterations: Infinity, direction: 'alternate', easing: 'ease-in-out' }); .container { position: relative; width: 100%; height: 200px; } .ball { position: absolute; width: 80px; height: 80px;

问题 Basically, I want to make use of the web-animations-api polyfill in angular (4 currently) to perform infinite animations on elements. Let's see a basic non-angular example: var ball = document.getElementById('ball'); ball.animate([ { transform: 'scale(0.5)' }, { transform: 'scale(1)' } ], { duration: 1000, iterations: Infinity, direction: 'alternate', easing: 'ease-in-out' }); .container { position: relative; width: 100%; height: 200px; } .ball { position: absolute; width: 80px; height: 80px;

问题 I want to disable the Angular Material mat-tab animation (the animation that occurs as the content slides into place). I know it is possible to use the [@.disabled] attribute but I wonder if it is possible to achieve the same effect with pure css. EDIT: Our UX team wants to remove the slide animation from the material tabs since they think they are not appropriate for whatever reason. We have multiple projects that may use multiple times the tabs component, so we wanted a way to remove this