vue3.0的动画怎么才能吸引眼球，做的更炫酷。

在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验

• 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动画的实现的过程了  大家有空的也可以试一下 感谢阅读，希望对您有所帮助，喜欢的点点赞，收藏一下，有什么问题大家也可以讨论一下，我也把知识点放在下边了，下个文章咱们再见！