在使用Angular CDK和开发自定义组件时,我正在尝试使用ngIf和ngFor实现交错动画.
动画是一系列简单的淡入.
动画是一系列简单的淡入.
以下简化的HTML:
<button (click)="visible = !visible">Toggle</button> <div class="parent" @parentAnimation *ngIf="visible"> <p class="child">Child 1</p> <p class="child">Child 2</p> <p class="child">Child 3</p> </div>
和组件:
@Component({ selector: 'my-app',templateUrl: './app.component.html',styleUrls: [ './app.component.css' ],animations: [ trigger('parentAnimation',[ transition('void => *',[ query('.child',style({opacity: 0})),query('.child',stagger('500ms',[ animate('100ms .1s ease-out',style({opacity: 1})) ])) ]),transition('* => void',style({opacity: 1})),style({opacity: 0})) ])) ]) ]) ] }) export class AppComponent { visible = false; }
StackBlitz – https://stackblitz.com/edit/angular-5dj532
从上面的链接中可以看出,问题是当隐藏元素时,需要颠倒顺序(LIFO).
有没有适当的方法来实现这个使用角度动画?
解决方法
在第二个交错时使用负时间:
.... query('.child',stagger('-500ms',[.... ...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。