vue过渡怎么实现

Vue过渡的实现方法

Vue提供了<transition>和<transition-group>组件来实现元素的过渡效果。这些组件可以与CSS过渡/动画或JavaScript钩子结合使用。

使用CSS过渡

通过Vue的<transition>组件包裹需要过渡的元素，并定义相应的CSS类名来实现过渡效果。

<transition name="fade">
  <p v-if="show">这是一段会淡入淡出的文字</p>
</transition>

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

使用CSS动画

与CSS过渡类似，但使用@keyframes定义动画。

<transition name="bounce">
  <p v-if="show">这是一段会弹跳的文字</p>
</transition>

.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);
  }
}

使用JavaScript钩子

通过<transition>组件的JavaScript钩子函数实现更复杂的过渡效果。

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
  :css="false"
>
  <p v-if="show">使用JavaScript实现的过渡</p>
</transition>

methods: {
  beforeEnter(el) {
    el.style.opacity = 0;
    el.style.transformOrigin = 'left';
  },
  enter(el, done) {
    Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 });
    Velocity(el, { fontSize: '1em' }, { complete: done });
  },
  leave(el, done) {
    Velocity(el, { opacity: 0 }, { duration: 600 });
    Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { complete: done });
  }
}

列表过渡

使用<transition-group>组件实现列表项的过渡效果。

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

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

初始渲染过渡

通过appear属性使元素在初始渲染时也有过渡效果。

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class"
  appear-active-class="custom-appear-active-class"
>
  <p>初始渲染时也会有过渡效果</p>
</transition>

过渡模式

使用mode属性控制进入和离开过渡的顺序。

<transition name="fade" mode="out-in">
  <button v-if="isEditing" key="save">保存</button>
  <button v-else key="edit">编辑</button>
</transition>

以上方法涵盖了Vue过渡的主要实现方式，可以根据具体需求选择合适的方法或组合使用。