Vuejs教程-同时使用转场和动画

使用 Transitions 和 Animations 结合在一起时，Vue.js 需要附加事件监听器来知道过渡或动画何时结束。这可能是 transitionend 或 animationend，这取决于您应用的 CSS。如果您只使用其中一种类型，Vue.js 可以自动检测正确的类型。但是，在同时使用过渡和动画的情况下，您可能需要显式声明类型。

在某些情况下，您可能希望在同一元素上同时应用 CSS 动画和在鼠标悬停时应用的 CSS 过渡效果。在这些情况下，您需要在 type 属性中显式声明 Vue.js 关心的类型，其值为 animation 或 transition。

显式过渡持续时间

这是 Vue.js 2.2.0+ 版本中引入的新功能。它用于在元素上同时应用过渡和动画使用 Vue.js。默认情况下，Vue.js 必须等待过渡结束和动画结束事件来检测动画或过渡是否完成。在这种情况下，当过渡导致延迟时，我们可以显式地指定持续时间，如下所示：

<transition :duration="1000"></transition>

在上面的代码中，duration 属性与过渡元素一起使用，如您在上面的代码中所见。

如果您想为进入和离开的情况分别指定持续时间，可以如下所示指定：

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

JavaScript 钩子

过渡类可以作为 JavaScript 方法进行调用。您可以在属性中定义 JavaScript 钩子。让我们看一个示例来更好地理解这个概念：

Index.html 文件:

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Animation</title>
  <link rel="stylesheet" href="index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
</head>
<body>
<div id="trans">
  <button @click="show = !show">
    <span style="font-size:25px;">Toggle</span>
  </button>
  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show" style="font-size:25px;">
      This is an animation Example with velocity
    </p>
  </transition>
</div>
<script src="index.js"></script>
</body>
</html>

Index.js 文件:

var vm = new Vue({ 
  el: '#trans',
  data: { 
    show: false 
  },
  methods: { 
    beforeEnter: function (el) { 
      el.style.opacity = 0 
    }, 
    enter: function (el, done) { 
      Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 }) 
      Velocity(el, { fontSize: '10px' }, { complete: done }) 
    }, 
    leave: function (el, done) { 
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 }) 
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 }) 
      Velocity(el, { 
        rotateZ: '45deg', 
        translateY: '30px', 
        translateX: '30px', 
        opacity: 0 
      }, { complete: done }) 
    } 
  } 
})

让我们使用一个简单的 CSS 文件使输出更具吸引力。

Index.css 文件:

html, body {
  margin: 5px;
  padding: 0;
}

执行程序后，您将看到以下输出:

输出:

当您点击 "Toggle" 按钮时，您可以看到过渡和动画效果。参见以下输出:

初始渲染时的过渡

如果您希望在开始时添加动画，您必须在过渡元素中添加 'appear' 属性。查看以下示例以更好地理解：