vue中过渡动画（类名实现方式）

最新推荐文章于 2023-04-28 09:44:36 发布

Msro

最新推荐文章于 2023-04-28 09:44:36 发布

阅读量897

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mushitianya/p/10511896.html

版权

vue中过渡动画分为两类，一类是进场动画，一类是出场动画
要实现上面的进场动画，主要有三种方式：类名，css动画库，js函数

类名本质就是动态添加类名实现动画

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

思路：

找到需要添加过渡动画的元素，用一个transition标签包裹起来，并给它指定一个name属性，这个name属性将来会替换掉类名的v-前缀
定义上面6个类名里面的类容，注意类名v-前缀要换成name的值，关键要分清楚开始和结束的状态样式

<style>
.move-enter {
  padding-left: 100px;
}
.move-enter-active {
  transition: all 6s;
}
.move-enter-to {
  padding-left: 0;
}

.move-leave {
  padding-left: 0;
}
.move-leave-active {
  transition: all 6s;
}
.move-leave-to {
  padding-left: 100px;
}
</style>
<body>
   <div id="app">
      <transition name="move">
         <div v-if="isShow">显示</div>
      </transition>
      <button @click="isShow = !isShow">切换</button>
   </div>
<script>
      var vm = new Vue({
        el: '#app',
        data: {
          isShow: false
        }
      })
 </script>
</body>

注意点：

在标签同名的情况下，vue为了提高效率，会直接替换掉标签中的内容。为了解决这个问题，给每个标签加一个key属性，但这个key必须不一样
当transition下面有两个标签要切换的时候，会出现同时在动的情况，解决方式给transition加一个mode属性
如果想要动画一进来就有，那么就给transition加要给appear属性

<transition name="move" mode="out-in" appear>
    <div v-if="isShow" key="one">显示</div>
    <div v-else key="two">隐藏</div>
</transition>
<button @click="isShow = !isShow">切换</button>

转载于:https://www.cnblogs.com/mushitianya/p/10511896.html