VueJS 转场和动画
VueJS 转场和动画
在本章中，我们将讨论VueJS中提供的过渡和动画功能。
转场
VueJS提供了在DOM中添加/更新HTML元素时向其应用转换的各种方法。VueJS有一个内置的转换组件，它需要包装在需要转换的元素周围。
语法
<transition name = "nameoftransition"> <div></div> </transition>
让我们通过例子来理解过渡的工作。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 2s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0
}
</style>
<div id = "databinding">
<button v-on:click = "show = !show">Click Me</button>
<transition name = "fade">
<p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true,
styleobj :{
fontSize:'30px',
color:'red'
}
},
methods : {
}
});
</script>
</body>
</html>有一个称为clickme的按钮，我们可以使用它将变量show的值更改为true，反之亦然。只有当变量为true时，才会显示文本元素。我们已经用transition元素包装了p标记，如下面的代码所示。
<transition name = "fade"> <p v-show = "show" v-bind:style = "styleobj">Animation Example</p> </transition>
转场的名称为fade。VueJS为转换提供了一些标准类，这些类的前缀是转换的名称。
以下是一些用于转换的标准类
v-enter：在更新/添加元素之前，首先调用此类。这是开始状态。
v-enter-active：此类用于定义进入过渡阶段的延迟、持续时间和缓和曲线。这是整个的活动状态，并且类在整个进入阶段期间可用。
v-leave：当离开转换被触发时添加、移除。
v-leave-active：在离开阶段施加。当转换完成时，它将被移除。此类用于在离开阶段应用延迟、持续时间和缓和曲线。
以上每个类都将以转换的名称作为前缀。我们已将转换的名称指定为fade，因此类的名称变为。淡入淡出。淡入淡出。淡入淡出。淡入淡出。
它们在以下代码中定义。
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 2s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0
}
</style>.fade_enter_active和.fade_leave_active一起定义，并在开始和离开阶段应用转换。不透明度属性在2秒内更改为0。
持续时间在.fade_enter_active和.fade_leave_active中定义。最后一个阶段定义在.fade_enter, .fade_leave_to.。
浏览器中的显示如下所示。
单击按钮，文本将在两秒钟内消失
让我们考虑另一个示例，其中有一个图像，当单击按钮时，它在x轴上移动。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.shiftx-enter-active, .shiftx-leave-active {
transition: all 2s ease-in-out;
}
.shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
transform : translateX(100px);
}
</style>
<div id = "databinding">
<button v-on:click = "show = !show">Click Me</button>
<transition name = "shiftx">
<p v-show = "show">
<img src = "images/img.jpg" style = "width:100px;height:100px;" />
</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true
},
methods : {
}
});
</script>
</body>
</html>转换的名称为shiftx。变换属性用于使用以下代码将x轴上的图像移位100 px。
<style>
.shiftx-enter-active, .shiftx-leave-active {
transition: all 2s ease-in-out;
}
.shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
transform : translateX(100px);
}
</style>下面是输出
单击按钮，图像将向右移动100像素。
动画
动画的应用方式与过渡的应用方式相同。动画还具有需要声明才能发生效果的类。
让我们考虑一个例子来看看动画是如何工作的。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/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">
<button v-on:click = "show = !show">Click Me</button>
<transition name = "shiftx">
<p v-show = "show">
<img src = "images/img.jpg" style = "width:100px;height:100px;" />
</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true
},
methods : {
}
});
</script>
</body>
</html>要应用动画，vue提供了与转场相同的类。在上面的代码中，我们有一个包含在p标签中的图像，如下面的代码所示。
<transition name = "shiftx"> <p v-show = "show"><img src = "images/img.jpg" style = "width:100px;height:100px;" /></p> </transition>
转换的名称为shiftx。应用的类如下所示
<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。动画由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);}
}下面是输出
单击按钮后，它将从0旋转到360度并消失。
自定义转换类
VueJS提供了自定义类的列表，这些类可以作为属性添加到转换元素中。
enter-class
enter-active-class
leave-class
leave-active-class
当我们想要使用外部CSS库(例如动画)时，自定义类基本上起作用
例子
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "animate" style = "text-align:center">
<button @click = "show = !show"><span style = "font-size:25px;">Animate</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;">Example</span></p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#animate',
data: {
show: true
}
});
</script>
</body>
</html>输出
上面的代码中应用了两个动画。一个enter-active-class= "animated swing"和leave-active-class= "animated bounceIn"。我们正在使用自定义动画类从第三方库应用动画。
显式跃迁持续时间
我们可以使用VueJS在元素上应用过渡和动画。vue等待transinoned和animationend事件检测动画或转换是否完成。
有时转换会导致延迟。在这种情况下，我们可以明确地应用持续时间，如下所示。
<transition :duration = "1000"></transition>
<transition :duration = "{ enter: 500, leave: 800 }">...</transition>我们可以在转换元素上使用duration属性，如上面所示。如果需要分别指定进入和离开的持续时间，可以按照上面的代码进行。
JavaScript Hooks
转换类可以使用JavaScript事件作为方法调用。让我们考虑一个更好理解的例子。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id = "example-4">
<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;">Animation Example with velocity</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#example-4',
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 })
}
}
});
</script>
</body>
</html>输出
在上面的示例中，我们正在转换元素上使用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和调用方法的事件的名称。方法在Vue实例中定义如下：
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 })
}
}在这些方法中的每一种中应用所需的转换。单击按钮时会应用不透明度动画，动画完成后也会应用不透明度动画。第三方库用于动画。
在转换中添加了一个属性v-bind:CSS="false"，这样做是为了让Vue理解它是一个JavaScript转换。
初始渲染时的过渡
为了在开始时添加动画，我们需要向过渡元素添加“显示”属性。
让我们看一个例子来更好地理解它。
例子
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "animate" style = "text-align:center">
<transition
appear
appear-class = "custom-appear-class"
appear-active-class = "animated bounceIn">
<h1>BounceIn - Animation Example</h1>
</transition>
<transition
appear
appear-class = "custom-appear-class"
appear-active-class = "animated swing">
<h1>Swing - Animation Example</h1>
</transition>
<transition
appear
appear-class = "custom-appear-class"
appear-active-class = "animated rubberBand">
<h1>RubberBand - Animation Example</h1>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#animate',
data: {
show: true
}
});
</script>
</body>
</html>在上面的示例中，我们使用了来自animate . CSS库的三个不同动画。我们在过渡元素中添加了“外观”。
执行上述代码时，浏览器中的输出如下所示。
组件上的动画
我们可以使用以下代码包装组件的转换。我们在这里使用了动态组件。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">
</head>
<body>
<div id = "databinding" style = "text-align:center;">
<transition appear
appear-class = "custom-appear-class"
appear-active-class = "animated wobble">
<component v-bind:is = "view"></component>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-
size:25;color:red;">Animation on Components</span></div>'
}
}
});
</script>
</body>
</html>输出
