Question

正如您现在所做的那样，Bootstrap切换只需将display: none更改为display: block，反之亦然。我一直在阅读Angular 2 Animation Guide，但是当我只想根据元素的style.display属性进行更改时，这一切似乎都取决于组件的更改属性。

我是否以错误的方式思考这个问题，或者我将如何做到这一点？

Answer 1

如Angular Docs中所述，您可以使用void和*状态来定义动画元素进入和离开的过渡：

输入：void =＆gt; *
离开：* =＆gt;空隙

animations: [
   trigger('myAwesomeAnimation', [
      transition('void => *', [
        style({ opacity: 0 }),
        animate(1000)
      ]),
      transition('* => void', [
        animate(1000, style({opacity: 100}))
      ])
  ])   
]

HTML

<ul>
  <li  @myAwesomeAnimation *ngFor="let i of list">
   {{ i }}
  </li>
</ul>

Demo Punkr

Answer 2

我在组件中使用jquery切换到toggle()，然后采用更加Angular-idomatic的方式将布尔属性与*ngIf一起使用。它更清晰，更具说明性，并允许我使用:enter和:leave过渡。

如何在Angular 2中为Bootstrap切换设置动画？

2 个答案: