Vue.js 过渡
Vue.js 过渡
Vue.js提供了几种在DOM中插入，更新或删除项目时将过渡和动画效果应用于应用程序的方法。这些过渡和动画效果用于使应用程序对用户具有吸引力和交互性。
它还提供了一些工具来执行以下任务:
它提供了类，并自动将这些类应用于CSS过渡和动画。
它可以集成第三方CSS动画库，例如Animate.css。
它可以使用JavaScript在过渡挂钩期间直接操作DOM。
它可以集成第三方JavaScript动画库，例如Velocity.js。
Vue.js过渡
当您从DOM中插入，更新或删除项目时，有多种方法可以将过渡应用于HTML元素。Vue.js提供了一个内置的转换包装器组件，您在输入/保留任何元素或组件的转换时必须使用该组件。请参见过渡效果的语法。
语法:
<transition name = "name_of_the_transition">
<div></div>
</transition>
让我们看一个简单的示例，以了解过渡效果的概念和作用。
Vue.js淡入过渡
示例1
Index.html文件:
<html>
<head>
<title>Vue.js Transition</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 3s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0
}
</style>
<div id = "databinding">
<p> Click at the below button to see transition effect.</p>
<button v-on:click = "show = !show">Click Here</button>
<transition name = "fade">
<p v-show = "show" v-bind:style = "styleobj">This is a Fade Transition Example</p>
</transition>
</div>
</script>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#databinding',
data: {
show:true,
styleobj :{
fontSize:'30px',
color:'red'
}
},
methods : {
}
})
让我们使用一个简单的
CSS 文件使输出更具吸引力。
CSS 文件使输出更具吸引力。
Index.css文件:
html, body {
margin: 5px;
padding: 0;
}
程序执行后，您将看到以下输出:
输出:
单击该按钮时，文本将在3秒钟内消失。参见下图:
示例说明
在上面的示例中，我们创建了一个名为"Click Here"的按钮，可以将show变量的值从true更改为false，反之亦然。我们在p标签中编写了v-show指令，该指令仅在变量为true时显示文本元素。 p标签与transition元素包装在一起，如下所示:
<transition name = "fade">
<p v-show = "show" v-bind:style = "styleobj">This is a Fade Transition Example</p>
</transition>
这是
渐变过渡的示例。以下是过渡中使用的一些标准类的列表:
渐变过渡的示例。以下是过渡中使用的一些标准类的列表:
v-enter: : 此过渡类在元素被更新或添加到HTML元素之前首先被调用。
v-enter-active: 。此过渡类用于定义进入过渡阶段的延迟，持续时间和缓动曲线。此类指定了整个阶段的活动状态，并且在整个进入阶段都始终可用。
v-leave:
v-leave-active: : 此过渡类在离开阶段使用。过渡完成后，此类将自动删除。此类指定离开阶段的延迟，持续时间和缓动曲线。
每个过渡类都将以过渡名作为前缀。例如，对于淡入淡出过渡，这些类的名称分别是.fade_enter，.fade_enter_active，.fade_leave，.fade_leave_active。
在上面的示例中，我们同时定义了.fade_enter_active和.fade_leave_active类，并在开始和离开阶段应用过渡。
在这里，不透明度属性会在3秒内变为0。
Vue.js shiftx过渡
再举一个例子，点击按钮时我们使用图像在x轴上移动。
这里，我们使用
shiftx 过渡。此transform属性会将x轴上的图像移动100px。请参见以下示例:
shiftx 过渡。此transform属性会将x轴上的图像移动100px。请参见以下示例:
示例2
Index.html文件:
<html>
<head>
<title>Vue.js Transition</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, .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">
<p> Click at the below button to see transition 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 : {
}
})
程序执行后，您将看到以下输出:
输出:
单击该按钮时，图像将向右移动100px。请参见以下输出:
