Vue2.0 Transition 用法 css 过度动画动画过度状态钩子函数

最新推荐文章于 2022-06-10 18:36:43 发布

原创最新推荐文章于 2022-06-10 18:36:43 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

JAVASCRIPT 专栏收录该内容

83 篇文章

订阅专栏

本文详细介绍了如何在Vue.js中使用过渡动画，包括通过CSS设置元素的过渡效果，自定义过渡类名，以及使用JavaScript钩子函数直接操作DOM实现过渡。涵盖了从基本过渡到高级自定义的所有关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

元素设置

<!-- 首先将要过渡的元素用transition包裹  -->
<div>
  <button @click="show=!show">show</button> // 点击触发
  <transition>
    <p v-show="show">hello</p>
  </transition>
</div>

CSS设置

v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在transition/animation完成之后移除。

v-leave:定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在transition/animation完成之后移除。

.v-enter,
.v-leave-to {
  filter: alpha(opacity=0);
  opacity: 0;
  -moz-opacity: 0;
  -o-opacity: 0;
  -webkit-opacity: 0;
  transform: scale(2, 2);
  -webkit-transform: scale(2, 2);
  -moz-transform: scale(2, 2);
  -o-transform: scale(2, 2);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.4s ease;
}

自定义过渡类名

上面的四个过渡类名都是根据transition的name属性自动生成的。

可以通过

enter-class

enter-active-class

leave-class

leave-active-class

这四个特性来定义。

<div>
  <button @click="show=!show">show</button>
  <transition 
    enter-class="fade-in-enter"
    enter-active-class="fade-in-active"
    leave-class="fade-out-enter"
    leave-active-class="fade-out-active"
  >
    <p v-show="show">hello</p>
  </transition>
</div>

上面代码中，原来默认的fade-enter类对应fade-in-enter，fade-enter-active类对应fade-in-active，依次类推。

JavaScript钩子函数

除了用CSS过渡的动画来实现vue的组件过渡，还可以用JavaScript的钩子函数来实现，在钩子函数中直接操作DOM。我们可以在属性中声明以下钩子：

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
</transition>

methods: {
  // 过渡进入
  // 设置过渡进入之前的组件状态
  beforeEnter: function (el) {
    // ...
  },
  // 设置过渡进入完成时的组件状态
  enter: function (el, done) {
    // ...
    done()
  },
  // 设置过渡进入完成之后的组件状态
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },
  // 过渡离开
  // 设置过渡离开之前的组件状态
  beforeLeave: function (el) {
    // ...
  },
  // 设置过渡离开完成时地组件状态
  leave: function (el, done) {
    // ...
    done()
  },
  // 设置过渡离开完成之后的组件状态
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}