Vue.js动画
Vue.js动画
在Vue.js应用程序中，我们可以采用与在先前示例中应用过渡相同的方式来应用动画。动画还有一些类必须声明才能获得动画效果。
Vue.js过渡和Vue.js动画之间的唯一区别是，在Vue.js动画中，不会删除v-enter
让我们以一个例子来理解动画的概念，并查看动画在应用程序中的工作方式。
示例
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>
</head>
<body>
<style>
.shiftx-enter-active {
animation: shift-in 2s;
}
.shiftx-leave-active {
animation: shift-in 2s reverse;
}
@keyframes shift-in {
0% {transform:rotateX(0deg);}
25% {transform:rotateX(90deg);}
50% {transform:rotateX(120deg);}
75% {transform:rotateX(180deg);}
100% {transform:rotateX(360deg);}
}
</style>
<div id = "databinding">
<p> Click at the below button to see the animation effect.</p>
<button v-on:click = "show = !show">Click Here</button>
<transition name = "shiftx">
<p v-show = "show">
<img src = "https://www.flowerpower.com.au/media/catalog/product/image/287189f77f/love-you-rose.jpg" style = "width:100px;height:100px;" />
</p>
</transition>
</div>
</script>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#databinding',
data: {
show:true
},
methods : {
}
})
让我们使用简单的
CSS 文件使输出更具吸引力。
CSS 文件使输出更具吸引力。
Index.css文件:
html, body {
margin: 5px;
padding: 0;
}
程序执行后，您将看到以下输出:
输出:
当您单击"单击此处"按钮时，您可以看到动画效果。图像将从0旋转到360度，最后消失。请参见以下图像:
另一个屏幕截图:
示例说明
在上面的示例中，您可以看到我们使用了与过渡效果相同的类。在这里，我们将图像封装在p标签中，如下所示:
<transition name = "shiftx">
<p v-show = "show">
<img src = "https://www.flowerpower.com.au/media/catalog/product/image/287189f77f/love-you-rose.jpg" style = "width:100px;height:100px;" />
</p>
</transition>
在这里，转换的名称为
shiftx ，并且该类将用作以下CSS代码:
shiftx ，并且该类将用作以下CSS代码:
<style>
.shiftx-enter-active {
animation: shift-in 2s;
}
.shiftx-leave-active {
animation: shift-in 2s reverse;
}
@keyframes shift-in {
0% {transform:rotateX(0deg);}
25% {transform:rotateX(90deg);}
50% {transform:rotateX(120deg);}
75% {transform:rotateX(180deg);}
100% {transform:rotateX(360deg);}
}
</style>
在上面的代码中，该类在过渡名称中定义，即
shiftx-enter-active和.shiftx-leave-active。
shiftx-enter-active和.shiftx-leave-active。
已定义了动画
关键帧的范围从0％到100％，其中每个关键帧的变换程度定义如下:
关键帧的范围从0％到100％，其中每个关键帧的变换程度定义如下:
@keyframes shift-in {
0% {transform:rotateX(0deg);}
25% {transform:rotateX(90deg);}
50% {transform:rotateX(120deg);}
75% {transform:rotateX(180deg);}
100% {transform:rotateX(360deg);}
}
自定义过渡类
Vue.js 可帮助您指定您可以通过提供以下属性来定制自己的自定义过渡类。这些属性可以添加到过渡元素中。
enter-class
enter-active-class
enter-to-class (added in version 2.1.8+)
leave-class
leave-active-class
leave-to-class (added in version 2.1.8+)
自定义类通常在我们想要使用外部CSS库(例如animate.css)时使用。
让我们举一个例子来了解自定义过渡类的概念并了解它们如何
示例
Index.html文件:
<html>
<head>
<title>Vue.js Animation</title>
<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 type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "animation" style = "text-align:center">
<button @click = "show = !show"><span style = "font-size:25px;">Click Here</span></button>
<transition
name = "custom-classes-transition"
enter-active-class = "animated swing"
leave-active-class = "animated bounceIn">
<p v-if = "show"><span style = "font-size:25px;">See the animation effect</span></p>
</transition>
</div>
</script>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#animation',
data: {
show: true
}
})
程序执行后，您将看到以下输出:
输出:
当您单击"单击此处"按钮时，您可以看到两种类型的动画。应用于上面示例的第一个动画是:
enter-active-class = "animated swing"
输出:
第二个动画是:
leave-active-class = "animated bounceIn"
输出:
此处，我们已经使用第三方库
animate.css 来展示示例中自定义动画类的使用。
animate.css 来展示示例中自定义动画类的使用。
<link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">