跳至主要內容

动画技巧

Zhao Bin笔记frontendvuevue3

动画技巧

基于 CSS class 的动画

对于那些不是正在进入或离开 DOM 的元素,我们可以通过给它们动态添加 CSS class 来触发动画:

基于 CSS class 的动画

状态驱动的动画

有些过渡效果可以通过动态地插值来实现,例如,在交互时动态地绑定样式到元素,以这个例子为例:

状态驱动的动画

带侦听器的动画

在一些动画创意里,我们可以根据一些数字状态,使用侦听器将任何东西做成动画。例如,我们可以将数字本身变成动画:

带侦听器的动画