Vue 动画的使用

最新推荐文章于 2025-06-30 23:10:09 发布

weixin_34191734

最新推荐文章于 2025-06-30 23:10:09 发布

阅读量156

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5bbb3307f265da0aeb711e1b

本文深入讲解Vue中的动画应用，包括自定义动画、结合animate.css库使用及半场动画的实现方式。通过具体代码示例，介绍了如何利用Vue的transition组件进行动画设计，使页面效果更加生动。

个人感觉之前都是 jq来做动画，很方便，而到了vue的时代，突然发现自己不怎么会用动画了，再重新好好学一遍 vue的动画，哈哈哈...

废话不多说，开始用

1、自定义动画

首先你要清楚这些动画是在 vue的 transition组件中，而且你的被包裹元素，要有 v-if或者 v-show这些可提供显示隐藏的

如下

// vue组件
<transition name='fade'>
  <p v-if='mesg' class='ni'>1</p>
</transition>


// css
// enter-active,live-active 是开始到正常显示和正常显示到离开之间的过渡状态 这两个是一样的
.fade-enter-active,.fade-leave-active { 
        transition: all 1s ease-in-out;
}
// enter 是开始 leave-to是离开 这两个状态是一样的
.fade-enter,.fade-leave-to {
        opacity: 0;
        transform: translateX(130px);
}
复制代码

2、结合animate.css

这个动画库会使你的动画更酷（别忘了引入animate.css文件哦）

// vue中首先找到你要进场动画，在找到你要出去的动画效果 然后给该元素加上 animated
<transition enter-active-class="bounceInLeft" leave-active-class="bounceOutRight">
  <div class="box animated" v-show="mesg">我要运动</div>
</transition>

// 或者 把animated加在这两个里面都可
<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
<div class="box" v-show="mesg">我要运动</div>
</transition>

复制代码

3、半场动画

比如有些业务，类似点外卖，当选中商品加入购物车，我们只看到了，从上到购物车添加的动画，却没见回去的动画，这个以上两种是实现不了的如图类似这种，每次动画都是从上面开始，而没有回退

代码如下

// vue中 提拱了动画的钩子函数
<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
>
  <div class='ball' v-show='mesg'></div>
</transition>

// 动画钩子函数的第一个参数就是 要运动的原生dom对象
beforeEnter (el) {
  // 表示动画入场之前，此时动画尚未开始 可以在 beforeEnter 中设置元素开始动画之前的起始样式
  el.style.transform = "translate(0,0)";
  el.style.opacity = 0;
},
enter (el,done) {
  // el.offsetWidth 会强制刷新动画必须加，要不动画出不来
  el.offsetWidth
  // 表示动画开始之后的样式 这里可以设置小球完成动画的结束状态
  el.style.transform = "translate(150px,450px)";
  el.style.opacity = 0.8;
  el.style.transition = 'all 1s ease';
  // 这里的 done 就是 afterEnter 的引用
  done()
},
afterEnter (el) {
  // 动画完成之后
  this.mesg = !this.mesg
},
复制代码

转载于:https://juejin.im/post/5bbb3307f265da0aeb711e1b