知识库

Appearance

Return to top
On this page

过渡与动画

过渡效果

Vue.js提供了transition组件，可以在元素和组件进入/离开DOM时自动应用过渡效果。

基础过渡

vue
<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello Vue!</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

<style>
/* 过渡的开始和结束状态 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

过渡类名

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

  1. v-enter-from：进入过渡的开始状态
  2. v-enter-active：进入过渡的活跃状态（整个过渡过程）
  3. v-enter-to：进入过渡的结束状态
  4. v-leave-from：离开过渡的开始状态
  5. v-leave-active：离开过渡的活跃状态（整个过渡过程）
  6. v-leave-to：离开过渡的结束状态
<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="slide">
      <p v-if="show" class="slide-text">Sliding Text</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

<style>
.slide-enter-active {
  transition: all 0.3s ease;
}
.slide-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-enter-from,
.slide-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
.slide-text {
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
</style>

使用自定义过渡类名

可以使用以下属性来自定义过渡类名：

  • enter-from-class
  • enter-active-class
  • enter-to-class
  • leave-from-class
  • leave-active-class
  • leave-to-class
<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition 
      name="custom"
      enter-from-class="custom-enter-from"
      enter-active-class="custom-enter-active"
      enter-to-class="custom-enter-to"
      leave-from-class="custom-leave-from"
      leave-active-class="custom-leave-active"
      leave-to-class="custom-leave-to"
    >
      <p v-if="show">Custom transition</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

<style>
.custom-enter-active, .custom-leave-active {
  transition: all 0.5s ease;
}
.custom-enter-from, .custom-leave-to {
  opacity: 0;
  transform: scale(0.8);
}
</style>

过渡的生命周期钩子

Vue的过渡组件提供了JavaScript钩子，可以在过渡的不同阶段执行JavaScript代码：

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <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"
    >
      <p v-if="show" ref="textElement">Transition hooks example</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    beforeEnter(el) {
      console.log('Before enter', el)
    },
    enter(el, done) {
      console.log('Enter', el)
      // 执行动画
      el.style.opacity = 0
      // 动画完成后调用done()
      setTimeout(() => {
        el.style.opacity = 1
        done()
      }, 500)
    },
    afterEnter(el) {
      console.log('After enter', el)
    },
    enterCancelled(el) {
      console.log('Enter cancelled', el)
    },
    beforeLeave(el) {
      console.log('Before leave', el)
    },
    leave(el, done) {
      console.log('Leave', el)
      // 执行动画
      el.style.opacity = 1
      setTimeout(() => {
        el.style.opacity = 0
        done()
      }, 500)
    },
    afterLeave(el) {
      console.log('After leave', el)
    },
    leaveCancelled(el) {
      console.log('Leave cancelled', el)
    }
  }
}
</script>