Vue2 过渡与动画

单元素/组件过渡

基本用法

<transition name="fade">
  <p v-if="show">hello</p>
</transition>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

过渡类名

v-enter：进入过渡的开始状态
v-enter-active：进入过渡生效时的状态
v-enter-to：进入过渡的结束状态
v-leave：离开过渡的开始状态
v-leave-active：离开过渡生效时的状态
v-leave-to：离开过渡的结束状态

CSS 动画

<transition name="bounce">
  <p v-if="show">Lorem ipsum</p>
</transition>

<style>
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

自定义过渡类名

<transition
  name="custom"
  enter-active-class="animated fadeIn"
  leave-active-class="animated fadeOut"
>
  <p v-if="show">hello</p>
</transition>

JavaScript 钩子

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

methods: {
  beforeEnter(el) {
    el.style.opacity = 0
  },
  enter(el, done) {
    el.offsetWidth // 触发重绘
    el.style.transition = 'opacity 1s'
    el.style.opacity = 1
    done()
  },
  afterEnter(el) {
    console.log('enter completed')
  }
}

初始渲染过渡

<transition appear>
  <div>hello</div>
</transition>

多元素过渡

<transition name="fade" mode="out-in">
  <button v-if="isEditing" key="save">
    Save
  </button>
  <button v-else key="edit">
    Edit
  </button>
</transition>

列表过渡

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

<style>
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.list-move {
  transition: transform 1s;
}
</style>

实际应用

路由过渡

<transition name="fade" mode="out-in">
  <router-view></router-view>
</transition>

模态框过渡

<transition name="modal">
  <div v-if="showModal" class="modal-mask">
    <div class="modal-wrapper">
      <div class="modal-container">
        <slot></slot>
      </div>
    </div>
  </div>
</transition>

<style>
.modal-enter-active, .modal-leave-active {
  transition: opacity .3s;
}
.modal-enter, .modal-leave-to {
  opacity: 0;
}
.modal-enter-active .modal-container,
.modal-leave-active .modal-container {
  transition: transform .3s;
}
.modal-enter .modal-container,
.modal-leave-to .modal-container {
  transform: scale(1.1);
}
</style>