div高度上的Angular 2/4动画

Question

我会尽量保持简短.出于某种原因,我的动画似乎在宽度/不透明度样式属性上工作正常,但它不适用于高度属性....

动画 -

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)并填充许多行'hi'.我希望在div.animate show上制作我指定的动画.

救命!^^

Answer 1

您的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>

Answer 2

角度动画猫与*ngIf指令完美配合。

现在官方文档中有一节描述了如何做到这一点。

您的示例中的问题是模板动画触发器被指定为[@animate]，但在组件的动画声明中实际触发器是Grow。因此，模板触发器需要指定为[@Grow]。

应用程序组件.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" }))
      ])
    ])

应用程序组件.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