极客教程Vue.js 同时使用过渡和动画
Vue.js需要附加事件侦听器以使其知道过渡何时结束。这可能是 transitionend 或 animationend ，具体取决于您应用的 CSS。如果您只使用第一种或者只使用第二种类型，Vue.js可以自动检测正确的类型。但是，在同时使用过渡和动画的情况下，您可能需要显式声明类型。
在某些情况下，您可能希望在同一元素上同时具有两者，例如，有一个由Vue.js触发的 CSS 动画，并且有一个悬停时的 CSS 过渡效果。在这些情况下，您必须显式声明您希望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 Hooks
过渡类可以使用JavaScript作为方法进行调用。您可以在属性中定义JavaScript钩子。让我们看一个例子来更好地理解这个概念:
Index.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>
<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”按钮时，您可以看到过渡和动画。请参见以下输出:
示例解释
在上面的示例中，使用js方法在转换元素上执行动画。转换上的方法如下应用：
<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;">Animation Example with velocity</p>
</transition>
在事件名称前添加前缀v-on。我们还在过渡中添加了一个属性v-bind:css = “false”，以便Vue.js将其识别为JavaScript转换。
这些方法在Vue.js实例中定义如下：
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 })
}
}
在每个方法中应用所需的转换。单击按钮时应用不透明度动画，并在动画完成时应用。还使用第三方库进行动画。
在初始渲染中应用转换
如果要在开始时添加动画，则必须将’appear’属性添加到转换元素中。请参见以下示例以更好地理解：
Index.html文件：
<html>
<head>
<title>Vue.js Animation</title>
<link rel="stylesheet" href="index.css">
<link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/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_2" style = "text-align:center">
<transition
appear
appear-class = "custom-appear-class"
appear-active-class = "animated bounceIn">
<h3>This is BounceIn Animation Example</h3>
</transition>
<transition
appear
appear-class = "custom-appear-class"
appear-active-class = "animated swing">
<h3>This is Swing Animation Example</h3>
</transition>
<transition
appear
appear-class = "custom-appear-class"
appear-active-class = "animated rubberBand">
<h3>This is RubberBand Animation Example</h3>
</transition>
</div>
</script>
<script src="index.js"></script>
</body>
</html>
Index.js文件：
var vm = new Vue({
el: '#trans_2',
data: {
show: true
}
})
程序执行后，您将看到以下输出：
输出：
