Question

我正在使用Vue 2并尝试在经常创建和销毁的元素上包含CSS动画。以下是我的代码示例：

  export default {
    name: 'MyElement',
    methods: {
      enterStart: function (el) {
        console.log('about to enter');
        el.classList.add('testing-enter');
      },
      enter: function (el) {
        console.log('entered');
      },
      leaveStart: function (el) {
        console.log('starting to leave!');
      },
      leave: function (el) {
        console.log('leaving!');
      },
    }
  };

.testing-enter {
  animation: enter .2s;
}

.testing-leave {
  animation: leave .2s;
}

@keyframes enter {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes leave {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

<template>
  <div>
    <transition
      @before-enter="enterStart"
      @enter="enter"
      @leave="leaveStart"
      @leave-active="leave"
      appear
    >
      <div>My element is here!</div>
    </transition>
  </div>
</template>

首先，除非我在appear元素中加入<transition ...>，否则这一切都无效。我知道这会使转换发生在初始渲染上，但我希望它们在元素创建或销毁时发生。

接下来，在我的控制台中。我可以看到enterStart和enter都运行，但leaveStart和leave永远不会运行，即使元素被销毁也是如此。我做错了什么？

Answer 1

转换中的元素需要一个状态（显示或隐藏）。此外，您的转换需要一个必须在CSS中进行过渡的名称，并且应该使用

命名

名=＆＃34; transitionName＆＃34;

e.g：

＆＃13;

new Vue({
  el: "#app",
  data: function() {
    return {
      showThisElement: false
    }
  },
  methods: {
    toggleShow: function() {
      this.showThisElement = !this.showThisElement
    }
  }
});

＆＃13;

    .testing-enter-active {
      animation: enter .2s;
    }

    .testing-leave-active {
      animation: leave .2s;
    }

    @keyframes enter {
      0% {
        opacity: 0;
        transform: scale(0);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }
    @keyframes leave {
      0% {
        opacity: 1;
        transform: scale(1);
      }
      100% {
        opacity: 0;
        transform: scale(0);
      }
    }

＆＃13;

   <div id="app">
  
  <div @click="toggleShow">Show/Hide</div>
  
  <transition 
    name="testing">

    <div v-if="showThisElement">My element is here!</div>

  </transition>
</div>

＆＃13;

在codepen中，点击＆＃39;显示/隐藏＆＃39;切换过渡。

http://codepen.io/anon/pen/WpZPJp

Answer 2

问题解决了！

所以我从单个组件中取出了transition-group，并在呈现它们的容器组件周围创建了一个mode="out-in"。

然后，在稍微阅读之后，我意识到我想将transition-group字段添加到我的v-enter-active, v-enter-to,，以便在渲染新组件之前使离开组件完全动画化。

当动画应该发生时，我还查看了HTML，看看Vue添加了哪些类。看起来Vue添加了v-leave-to和{{1}}。

，而不是自定义任何名称，我只是坚持使用这些类，并在动画中添加了我的动画。

希望如果其他人想要类似的效果，这有助于他们减轻压力水平......

Vue.js动画无法正常工作

2 个答案: