在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验
- React框架本身并没有提供任何动画相关的API,所以在React中使用过渡动画我们需要使用一个第三方库 react-transition-group
- Vue中为我们提供一些内置组件和对应的API来完成动画,利用它们我们可以方便的实现过渡动画效果
1.动画
分为两步:
二、绑定关键帧动画
在需要添加动画的元素的css中添加属性 animation
animation也是一个复合属性
话不多说 直接上代码
这是css样式
咱们看一下视频效果
vue动画是通过组件 transition实现的
在显示离开产生动画 v-if v-show v-else v-else-if
2.关键帧动画
下面我们根据上一个代码 在改进一下,做一个旋转的样式
咱们看一下视频效果
感觉还行哈
下图
我们呢也可以从引入第三方库,实现一些比较新引人的动画我也给大家做了一下
可以说比第一个好看多了 效果也更好看了
接下来做一个比较厉害的加强版本大家可以看一下代码可能有点多
咱们来看一下效果怎么样
以上呢就是vue动画的实现的过程了 大家有空的也可以试一下 感谢阅读,希望对您有所帮助,喜欢的点点赞,收藏一下,有什么问题大家也可以讨论一下,我也把知识点放在下边了,下个文章咱们再见!