容器元素slide in和slide out的最小值和Angular4的本机方式是什么？
例如
<div ngIf="show">
<!-- Content -->
</div>
当show变为true时，从上到下显示Slide In个内容(就像jQuery.slideDown().
当show变为false时，含量为Slide Out(适当地具有缓和效果).
容器元素slide in和slide out的最小值和Angular4的本机方式是什么？
例如
<div ngIf="show">
<!-- Content -->
</div>
当show变为true时，从上到下显示Slide In个内容(就像jQuery.slideDown().
当show变为false时，含量为Slide Out(适当地具有缓和效果).
首先是一些代码，然后是解释.描述这一点的官方文件有here份.
import { trigger, transition, animate, style } from '@angular/animations'
@Component({
...
animations: [
trigger('slideInOut', [
transition(':enter', [
style({transform: 'translateY(-100%)'}),
animate('200ms ease-in', style({transform: 'translateY(0%)'}))
]),
transition(':leave', [
animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
])
])
]
})
在模板中:
<div *ngIf="visible" [@slideInOut]>This element will slide up and down when the value of 'visible' changes from true to false and vice versa.</div>
有棱角的，但我发现很容易理解.
人类语言中的动画部分:
我们将这部动画命名为"slideInOut".
添加元素时(:enter)，我们将执行以下操作:
->；立即将元素100%向上移动(从自身开始)，使其显示在屏幕外.
->；然后设置translateY值的动画，直到我们的值为0%，元素自然位于该值.
删除元素后，将translateY值(当前为0)设置为-100%(屏幕外).
我们使用的放松功能是放松，在200毫秒内，你可以根据自己的喜好改变它.
希望这有帮助！