位置：首页>> 网络编程>> JavaScript>> Vue中添加过渡效果的方法

Vue中添加过渡效果的方法

作者：HNS　　发布时间：2024-04-10 10:33:03　

标签：vue,过渡效果

关于vue的过渡效果，vue官方给的概述是这样的。

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

包括以下工具：

1、在 CSS 过渡和动画中自动应用 class

2、可以配合使用第三方 CSS 动画库，如 Animate.css

3、在过渡钩子函数中使用 JavaScript 直接操作 DOM

4、可以配合使用第三方 JavaScript 动画库，如 Velocity.js

其中里面也给出了许多的例子，但是例子给到了“多个元素过渡”的时候，就没有案例的代码了，在这里对vue官方文档的这部分案例做一部分补充。

以下我的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../js/vue.js" charset="utf-8"></script>
<title>过渡效果-多个元素的过渡</title>
<style>
/*淡入淡出按钮,这个使得按钮的效果很差*/
/*在 “on” 按钮和 “off” 按钮的过渡中，两个按钮都被重绘了，一个离开过渡的时候另一个开始进入过渡。这是 <transition> 的默认行为 - 进入和离开同时发生。*/
.fade-enter-active,.fade-leave-active{
transition: all .5s
}
.fade-enter,.fade-leave-active{
opacity: 0
}
/*淡入淡出+绝对定位*/
#app2{
position: relative;
height: 100px;
width: 100px;
background:green;
}
#app2 button{
position: absolute;
left:50％;
top: 50％;
}
.fade-abosolute-enter,.fade-abosolute-leave-active{
opacity: 0
}
.fade-abosolute-enter-active,.fade-abosolute-leave-active{
transition: all 1s
}
/*淡入淡出+绝对定位+滑动效果*/
/*这三种效果合在一起，产生的效果是比较好的*/
#app3{
width: 200px;
height: 100px;
background: rgb(26, 46, 224);
position: relative;
}
#app3 button{
position: absolute;
left: 50％;
top: 50％;
}
.fade-slide-enter-active,.fade-slide-leave-active{
transition: all 1s
}
.fade-slide-enter{
opacity: 0;
transform: translateX(30px);
}
.fade-slide-leave-active{
opacity: 0;
transform: translateX(-30px);
}
#app4{
position: relative;
width: 200px;
height: 100px;
background: rgb(8, 201, 80);
}
#app4 button{
position: absolute;
left: 50％;
top: 50％;
}
.fade-slide-mode-enter-active,.fade-slide-mode-leave-active{
transition: all .5s
}
.fade-slide-mode-enter{
opacity: 0;
transform: translateX(30px);
}
.fade-slide-mode-leave-active{
opacity: 0;
transform: translateX(-30px);
}
</style>
</head>
<body>

<div id="app1">

<transition name="fade" mode="out-in">
<button v-if="isEditing" key="save" @click="isEditing = !isEditing">
save
</button>
<button v-else key="edit" @click="isEditing = !isEditing">
Edit
</button>
</transition>
</div>

<div id="app2">
<transition name="fade-abosolute">
<button v-if="on" key="on" @click="on = !on">
on
</button>
<button v-else key="off" @click="on = !on">
off
</button>
</transition>
</div>

<div id="app3">
<transition name="fade-slide">
<button v-if="on" key="on" @click="on = !on">
on
</button>
<button v-else key="off" @click="on = !on">
off
</button>
</transition>
</div>

<div id="app4">
<transition name="fade-slide-mode" mode="in-out">
<button v-if="on" key="on" @click="on = !on">
on
</button>
<button v-else key="off" @click="on = !on">
off
</button>
</transition>
</div>
</body>
<script type="text/javascript">
var vm1 = new Vue({
el:'#app1',
data () {
return{
isEditing:true,
}
}
})
var vm2 = new Vue({
el:'#app2',
data () {
return {
on:true
}
}
})
var vm3 = new Vue({
el:'#app3',
data () {
return {
on:true
}
}
})
var vm4 = new Vue({
el:'#app4',
data () {
return {
on:true
}
}
})
</script>
</html>

来源：http://www.jianshu.com/p/7d6a919406a8

投稿

Vue中添加过渡效果的方法

猜你喜欢