代码之家 › 专栏 › 技术社区 › Ka Tech

角度动画使转换不在ngif上工作

angular-animations angular

Ka Tech · 技术社区 · 6 年前

在Angular7中,我正在制作一个动画扩展面板。我使用state enter将不透明度从0更改为1,高度从0更改为*。在左边,我希望不透明度从1到0,高度从*到0。

我可以成功地为enter制作动画,但由于某些原因,我在休假时得到了一个有趣的结果。它几乎先膨胀后收缩。我设置了一个stackblitz示例来更好地解释。

当展开并单击“单击我”按钮时,如何获得结果不透明度从1变为0,高度从*变为0?

StackBlitz

下面是我的动画代码。提前谢谢!

animations: [
    trigger('myAccordian', [      
      state('*', style({ opacity: 1, height: '*'})),
      transition(':enter', [
        style({ opacity: 0, height: 0}),
        animate('1s ease-in')
      ]),
      transition(':leave', [
        style({ opacity: 0, height: 0}),
        animate('1s ease-out')
      ])
    ])
  ]

0 回复 | 直到 6 年前

Jonathan Stellwag 6 年前

如果您描述了一个“*”状态,那么您还需要提供一些关于它在无效状态。另一种方法是直接描述输出样式,然后在动画内部处理完成样式。一个很好的例子可以在这里找到: Angular transition

trigger('myAccordian', [      
  transition(':enter', [
    style({ opacity: 0, height: 0}),
    animate('1s ease-in', style({ opacity: 1, height: '*' }))
  ]),
  transition(':leave', [
    style({ opacity: 1, height: '*'}),
    animate('1s ease-out', style({ opacity: 0, height: 0 }))
  ])
])

推荐文章

Night Train David Hoffman · 形状错误时触发角度动画

7 年前

Dolan · 角度路由器过渡动画有条件地左右滑动

7 年前

Wolf359 · 角度5动画:在“slideUp”之前设置“overlay:hidden”

7 年前

Shashan Sooriyahetti · 我们可以用angular 4实现高级过渡/动画吗?

7 年前

ararb78 · 重复动画角度4

7 年前

James · .Net Core Angular 4-捆绑重建上的重复应用程序组件

7 年前

Ranjith Varatharajan · Angular 5中的动画列表

7 年前

Messerschmitt · 角度4-请在应用程序中包括“BrowserAnimationsModule”或“NoopAnimationsModule”

7 年前

Davtho1983 · 使用Angular 4、transition和query设置SVG动画

7 年前

j3ff · 角度4+Jest预设角度:使用从文件导入的触发器在主机上测试动画

7 年前