vue2.0过渡 javascript钩子函数无效

发布于
2017-04-14

图片描述

如上图，小球的下落效果，v-on:before-enter="beforeDrop"和v-on:enter="enterDrop"两个函数是生效了的，可是v-on:after-enter="afterDrop"这个钩子函数并不能执行，请问是怎么回事？

vue.js

阅读 7.3k

4 个回答

灬Delete

✓ 已被采纳

图片描述
官网截图你的enter回调函数里应该要有done()

官网链接

增加一个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
       
</head>

<body>

<div id="example-4">
  <button @click="show = !show">
    Toggle
  </button>
  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter='afterEnter'
    v-bind:css="false"
  >
    <p v-if="show">
      Demo
    </p>
  </transition>
</div>
<script>
new Vue({
  el: '#example-4',
  data: {
    show: false
  },
  methods: {
    beforeEnter: function (el) {
        console.log('准备进入')

    },
    enter: function (el, done) {
        console.log('进入')
        done()
    },
    afterEnter(el){
        console.log('进入之后')
    }

  }
})
</script>
</body>
</html>

结果如下，点击按钮之后，三个毁掉函数依次触发
图片描述