Angular 2 - 动画 show/hide 不适用于组件标签
Angular 2 - Animation show/hide not work with component tag
我正在制作用于显示和隐藏组件的动画。
我的笨蛋:https://embed.plnkr.co/BxT8SKBq8JwuPP16FDu4/
<animation [@toggleHeight]="isShow"></animation>
<button (click)="isShow = (isShow==='show')? 'hide' : 'show'">Toggle</button>
<calc></calc>
单击按钮时,我希望 "animation" div 消失,但它没有。 "animation" 组件中的内容仍在显示。
我是不是做错了什么?任何帮助都会很棒。提前谢谢你。
问题是您正在尝试为自定义元素设置动画。它没有 CSS 中定义的 display
模式。如果您将 animation { display: block; }
添加到您的 CSS ,它将正常工作。您可以像这样在其父组件中执行此操作
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
animations: [
trigger('toggleHeight', [
state('hide', style({
height: '0px',
opacity: '0',
overflow: 'hidden',
// display: 'none'
})),
state('show', style({
height: '*',
opacity: '1',
// display: 'block'
})),
transition('hide => show', animate('200ms ease-in')),
transition('show => hide', animate('200ms ease-out'))
])
],
styles: [`
animation { display: block; }
`]
})
或者您可以将它添加到某个全局 CSS 文件中。
我正在制作用于显示和隐藏组件的动画。
我的笨蛋:https://embed.plnkr.co/BxT8SKBq8JwuPP16FDu4/
<animation [@toggleHeight]="isShow"></animation>
<button (click)="isShow = (isShow==='show')? 'hide' : 'show'">Toggle</button>
<calc></calc>
单击按钮时,我希望 "animation" div 消失,但它没有。 "animation" 组件中的内容仍在显示。
我是不是做错了什么?任何帮助都会很棒。提前谢谢你。
问题是您正在尝试为自定义元素设置动画。它没有 CSS 中定义的 display
模式。如果您将 animation { display: block; }
添加到您的 CSS ,它将正常工作。您可以像这样在其父组件中执行此操作
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
animations: [
trigger('toggleHeight', [
state('hide', style({
height: '0px',
opacity: '0',
overflow: 'hidden',
// display: 'none'
})),
state('show', style({
height: '*',
opacity: '1',
// display: 'block'
})),
transition('hide => show', animate('200ms ease-in')),
transition('show => hide', animate('200ms ease-out'))
])
],
styles: [`
animation { display: block; }
`]
})
或者您可以将它添加到某个全局 CSS 文件中。