Vue.js 动画无法正常工作

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>

首先，除非我在 <transition ...> 元素中包含 appear，否则这些都不起作用。我知道这会使过渡在初始渲染时发生，但我希望它们在元素被创建或销毁时发生。

接下来，在我的控制台中。我可以看到enterStart 和enter 都在运行，但leaveStart 和leave 从不运行，即使元素被破坏。我做错了什么？

Answer 1

问题解决了！

所以我从单个组件中取出transition，并在渲染它们的容器组件周围创建了一个transition-group。

然后，在阅读了更多内容后，我意识到我想将mode="out-in" 字段添加到我的transition-group 中，以便在渲染新组件之前，留下的组件完全动画化。

当动画应该发生时，我还查看了 HTML，以查看 Vue 添加了哪些类。看起来 Vue 添加了 v-enter-active, v-enter-to, 和 v-leave-to。我没有自定义任何名称，而是坚持使用这些类并将我的动画添加到样式中。

希望如果其他人想要类似的效果，这可以帮助他们降低压力水平......

Answer 2

过渡中的元素需要一个状态（显示或隐藏）。此外，您的过渡需要一个名称，该名称必须与 CSS 中的过渡非常相似，并且应该使用

命名

name="transitionName"

例如：

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

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

   <div id="app">
  
  <div @click="toggleShow">Show/Hide</div>
  
  <transition 
    name="testing">

    <div v-if="showThisElement">My element is here!</div>

  </transition>
</div>

在 codepen 中，单击“显示/隐藏”以切换过渡。

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