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

 

 

 

 

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值