我会尽量保持简短。 出于某种原因,我的动画似乎在宽度/不透明度样式属性上工作正常,但它不适用于高度属性....
动画 -
trigger('Grow', [
transition(':enter', [ // :enter is alias to 'void => *'
style({height:'0'}),
animate(500, style({height:'*'}))
]),
transition(':leave', [ // :leave is alias to '* => void'
animate(500, style({height:0}))
])
])
更改'身高'宽度/不透明度,动画效果很好...... 谁知道这个问题呢?无法在任何地方找到相关答案。
我尝试实现的一个例子就像udemy中的动画一样,点击div高度扩展显示所有视频的部分 - https://www.udemy.com/meteor-react/
感谢阅读。
更新 - 仍然无法正常工作......
也许它与我动画的内容有关?<div class="animate" *ngIf="show" [@animate]>
<div *ngFor="let video of section"><a>hi</a></div>
</div>
一旦我点击,div.animate会显示(通过ngif)并填充许多显示&#39; hi&#39;的行。 我希望在div.animate show上制作我指定的动画。
帮助! ^^
答案 0 :(得分:21)
您的trigger()
功能中没有定义任何状态。
trigger创建一个命名动画触发器,其中包含当绑定到触发器的表达式发生更改时要评估的state()
和transition()
条目的列表(表达式为[@slideInOut]="helpMenuOpen"
在下面的例子中。)
@Component({
...
animations: [
trigger('slideInOut', [
state('in', style({
overflow: 'hidden',
height: '*',
width: '300px'
})),
state('out', style({
opacity: '0',
overflow: 'hidden',
height: '0px',
width: '0px'
})),
transition('in => out', animate('400ms ease-in-out')),
transition('out => in', animate('400ms ease-in-out'))
])
]
})
export class AComponent implements OnInit {
helpMenuOpen: string;
constructor() { }
ngOnInit() {
this.helpMenuOpen = 'out';
}
toggleHelpMenu(): void {
this.helpMenuOpen = this.helpMenuOpen === 'out' ? 'in' : 'out';
}
}
然后在你的视图中使用它:
<div [@slideInOut]="helpMenuOpen">
<h1>My Title</h1>
<p>My paragraph</p>
</div>
<button (click)="toggleHelpMenu()">help</button>
答案 1 :(得分:2)
Angular 动画 cat 与 *ngIf
指令完美配合。
现在官方文档中有一个 section 描述了如何操作。
您示例中的问题是模板动画触发器指定为 [@animate]
,
但在组件的动画声明中,实际触发器是 Grow
。因此,模板触发器需要指定为 [@Grow]
。
app.component.ts
trigger("grow", [ // Note the trigger name
transition(":enter", [
// :enter is alias to 'void => *'
style({ height: "0", overflow: "hidden" }),
animate(500, style({ height: "*" }))
]),
transition(":leave", [
// :leave is alias to '* => void'
animate(500, style({ height: 0, overflow: "hidden" }))
])
])
app.component.html
<div class="test" *ngIf="show" [@grow]> <!-- Use exact same trigger name here -->
<div *ngFor="let video of section"><a>hi</a></div>
</div>
工作演示:stackblitz