如何解决Angular 7 路由器有条件地转换
我正在尝试有条件地在 div 上应用动画。我需要根据专用变量滑动顶部或底部。 这是我的动画功能:
export function slidetopOrBottom() {
return trigger('slidetopOrBottom',[
state('toTop',style({})),state('toBottom',transition('toTop => void',[
query(':enter',[
style({ transform: 'translateY(100%)' }),animate('1s ease-in-out',style({ transform: 'translateY(0%)' }))
],{ optional: true }),query(':leave',[
style({ transform: 'translateY(0%)' }),style({ transform: 'translateY(-100%)' }))
],{ optional: true })
]),transition('toBottom => void',[
style({ transform: 'translateY(-100%)' }),style({ transform: 'translateY(100%)' }))
],{ optional: true })
])
])
}
如果我把这个 html 标签放进去就可以了:
<div [@slidetopOrBottom]="'toTop'">
或 <div [@slidetopOrBottom]="'toBottom'">
我想根据条件将幻灯片应用到顶部或底部,点击顶部或底部按钮,所以我试图这样做:
<div [@slidetopOrBottom]="{value: slideDirection}">
在组件中:
slideDirection: string;
ngOnInit() {
this.slideDirection: 'toTop';
}
onBottomClick() {
this.slideDirection: 'toBottom';
}
onTopClick() {
this.slideDirection: 'toTop';
}
点击底部按钮,未检测到 slideDirection
的新值,div 滑动到顶部。
有没有办法解决这个问题?
谢谢
解决方法
您的属性分配不正确。如下使用。
<div [@slideTopOrBottom]="slideDirection">
Stackblitz 示例 - https://stackblitz.com/edit/animated-div-height-cj8ezh?file=src/app/app.component.ts
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。