Vue Transition Enter Before介绍

Vue Transition Enter Before可以为Vue组件的enter过渡添加钩子函数，在进入过渡之前执行一些操作，比如设置初始状态、添加动画类等。

使用方式

在Vue组件中添加<transition>标签，并设定name属性值。

<template>
  <div>
    <transition name="fade">
      <p v-show="show">Hello, world!</p>
    </transition>
  </div>
</template>

在CSS中添加过渡动画的类。

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

在Vue组件中定义methods，并添加beforeEnter钩子函数。

export default {
  name: "MyComponent",
  data() {
    return {
      show: false
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0;
    }
  }
}

钩子函数参数

在beforeEnter钩子函数中，可以获取到以下参数。

• el：正在过渡的元素。

• done：必须在某个时刻调用，才能让Vue知道钩子函数执行完毕。如果不调用，Vue将会认为过渡一直在进行中。

• vm：组件实例对象。

export default {
  methods: {
    beforeEnter(el, done, vm) {
      el.style.opacity = 0;
      setTimeout(() => {
        el.style.opacity = 1;
        done();
      }, 1000);
    }
  }
}

示例

以下是一个使用Vue Transition Enter Before的示例。

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade" v-on:before-enter="beforeEnter">
      <p v-show="show">Hello, world!</p>
    </transition>
  </div>
</template>

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

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

以上代码含有Vue组件、CSS样式和JavaScript代码，完整的示例代码请见GitHub。