Vue移入移出详解

一、基本概念

Vue中的移入移出指的是当一个元素进入或离开页面时的动画效果。通常情况下，我们使用CSS动画来实现这些效果，但是在Vue中，我们可以利用内置的过渡组件轻松实现。

Vue实现移入移出的基本流程如下：


<template>
  <transition name="fade">
    <div v-if="show">
      显示内容
    </div>
  </transition>
</template>

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

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

在上面的代码中，我们定义了一个名为“fade”的过渡组件，并在“div”中使用“v-if”指令控制组件的显示与隐藏。在样式中，我们定义了两个类“fade-enter-active”和“fade-leave-active”，用于控制进入和离开组件时的过渡效果。同时定义了两个类“fade-enter”和“fade-leave-to”，用于定义进入和离开时元素的样式。其中的“opacity”属性用于控制元素的透明度，实现淡入淡出的效果。

二、多种动画效果

Vue内置的过渡组件支持多种动画效果，我们可以根据需要进行使用。

1.过渡类名

Vue内置的过渡类名如下：

enter：进入动画的开始状态，会与过渡的name属性连接使用。
enter-to：进入动画的结束状态，会与过渡的name属性连接使用。
enter-active：进入动画的总时长状态，会与过渡的name属性连接使用。
leave：离开动画的开始状态，会与过渡的name属性连接使用。
leave-to：离开动画的结束状态，会与过渡的name属性连接使用。
leave-active：离开动画的总时长状态，会与过渡的name属性连接使用。

2.CSS Transition

我们可以通过自定义样式来实现不同的动画效果，同时，我们也可以使用Vue内置的CSS Transition组件来快速实现常用动画。

例如下面这个例子：


<template>
  <transition name="slide">
    <div>显示内容</div>
  </transition>
</template>

<style>
.slide-enter-active {
  transition: all .5s ease;
  position: absolute;
}

.slide-enter {
  transform: translateX(100%);
}

.slide-leave-active {
  transition: all .5s ease;
  position: absolute;
}

.slide-leave-to {
  transform: translateX(-100%);
}
</style>

这里我们利用Vue的内置组件“transition”实现了一个滑动效果。在样式中我们为组件定义了名为“slide”的过渡效果，当元素进入页面时，其位置从右侧移动到指定位置（此处为100%），当元素离开页面时，其位置从原来的位置左侧移出视线。如下图所示：

3.JavaScript Transition

Vue还支持通过JavaScript来控制过渡效果。我们可以在进入或离开动画开始前或结束后执行特定的函数。例如下面这个例子：


<template>
  <transition
    name="fade"
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
  >
    <div v-if="show">
      显示内容
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      let opacity = 0;
      setTimeout(() => {
        opacity = 1;
        el.style.opacity = opacity;
        done();
      }, 1000);
    }
  }
}
</script>

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

在这个例子中，我们利用了Vue提供的v-on指令监听进入和离开动画的开始和结束状态。在样式中，我们依然定义了两个类名“fade-enter-active”和“fade-leave-active”用于控制动画效果。

这里我们通过JavaScript手动设置元素的“opacity”属性实现了淡入淡出的效果。首先，在进入动画开始之前，我们将元素的透明度设置为0，在进入动画开始时，将元素的透明度逐渐变为1。使用setTimeout函数可以实现动画的延时，保证动画效果正常进行。

三、总结

本文主要介绍了Vue中移入移出的实现方式。可以根据需要选择使用CSS Transition、JavaScript Transition以及Vue内置的过渡类名等方式。无论使用哪种方式，都需要注意组件的过渡效果与原有样式的兼容性，确保动画效果正常进行。

原创文章，作者：SETSB，如若转载，请注明出处：https://www.506064.com/n/325197.html