vue.js 转场动画
Vue.js要求附加事件侦听器，以便在转场结束时知道它。取决于您的
CSS ，它可能是
transitionend 或
animationend 。已申请。如果仅使用第一种类型或仅使用第二种类型，则Vue.js可以自动检测正确的类型。但是，在必须同时使用转场和动画的情况下，可以显式声明类型。
在某些情况下，可能希望将两者都放在同一个元素上，例如，由Vue.js触发的CSS动画，以及CSS过渡对悬停效果。在这些情况下，您将必须在type属性中明确声明要Vue.js关心的类型，其值可以是animation或transition。
显式过渡持续时间
这是
Vue.js 版本2.2.0+中引入的新功能。这用于使用Vue.js在元素上应用过渡和动画。默认情况下，Vue.js必须等待transionend和animationend事件，以检测动画或过渡是否完成。在这种情况下，当过渡导致延迟时，我们可以明确地应用持续时间，如下所示:
<transition :duration = "1000"></transition>
持续时间属性与过渡元素上的: 符号一起使用，如您在上面的代码中所见。
如果要分别指定用于输入和离开个案的持续时间，则可以指定如下:
<transition :duration = "{ enter: 500, leave: 800 }">...</transition>
JavaScript钩子
可以使用
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;
}
程序执行后，您将看到以下输出:
输出:
当您单击
"切换" 按钮时，您会看到过渡和动画。请参见以下输出:
示例说明
在上述示例中，则在过渡元素上使用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 })
}
}
我们已在上述每种方法中应用了所需的过渡。单击按钮和完成动画后，将应用不透明度动画。第三方库也用于动画。
在初始渲染时进行过渡
如果要在开始时添加动画，则必须添加"出现"属性到过渡元素。请参阅以下示例以更好地理解它:
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
}
})
程序执行后，您将看到以下输出:
输出:
