Vue中的动画（二）
日期： 2020-07-26 分类： 跨站数据测试 317次阅读
transition-group实现列表动画
- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用transition 需要使用transition-group 。
- 如果要为 v-for 循环创建的元素设置动画，必须为每个元素设置:key属性，否则会报错。
- < transition-group >的 appear 属性能实现页面刚打开时，元素上移到指定位置的效果（初始渲染的过渡）。
- < transition-group >不同于 < transition >，它会以一个真实元素呈现：默认为一个 < span >。可通过tag属性将transition-group 渲染为指定的元素。
- < transition-group > 可通过在css样式中设置 v-move 来改变定位，它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过给< transition-group > 设置 name 属性来自定义前缀，也可以通过 move-class 属性手动设置。
<!DOCTYPE html>
<html lang="en">
<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">
<title>列表动画</title>
<script src="../lib/vue.js"></script>
<style>
li {
margin: .5rem;
border: 1px dashed black;
line-height: 30px;
padding: 0 5px;
width: 100%;
}
li:hover {
background-color: aquamarine;
transition: all 1s ease;
}
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,
.v-leave-active {
transition: all 1s ease;
}
/*v-move和v-leave-active配合使用，实现删除时后徐元素渐渐上来的效果*/
.v-move {
transition: all .6s ease;
}
.v-leave-active {
position: absolute;
}
</style>
</head>
<body>
<div id="app">
Id
<input type="text" v-model="id"> Name:
<input type="text" v-model="name">
<input type="button" value="添加" @click="add">
<!-- <ul> -->
<!--在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，
不能使用transition 需要使用transition-group
如果要为 v-for 循环创建的元素设置动画，必须为每个元素设置:key属性-->
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{item.id}}---{{item.name}}
</li>
</transition-group>
<!-- </ul> -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: "",
name: "",
list: [{
id: 1,
name: '富强'
}, {
id: 2,
name: '民主'
}, {
id: 3,
name: '文明'
}, {
id: 4,
name: '和谐'
}]
},
methods: {
add() {
this.list.push({
id: this.id,
name: this.name
})
},
del(i) {
this.list.splice(i, 1);
}
}
})
</script>
</body>
</html>
使用钩子函数实现半场动画
可在属性中声明JavaScript钩子，上部分为入场时的钩子函数，下部分为出场时的钩子函数
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
// ...
methods: {
// --------
// 进入中
// --------
beforeEnter: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
注： 当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
实现简单添加到购物车的效果：
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<script src="../lib/vue.js"></script>
<style>
.ball {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: brown;
}
</style>
</head>
<body>
<div id="app">
<!--使用钩子函数实现半场动画-->
<input type="button" value="快到碗里来" @click="flag=!flag">
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false,
// flag2: false,
// flag3: false
},
methods: {
//注意：动画钩子函数的第一个参数el表示要执行动画的那个DOM元素
beforeEnter(el) {
//设置小球开始动画之前的起始位置
el.style.transform = "translate(0, 0)"
},
enter(el, done) {
//这一句不加无法看见动画过程
el.offsetWidth
//enter 表示动画开始之后的样式，这里可以设置小球完成动画之后的结束状态
el.style.transform = "translate(150px, 450px)"
el.style.transition = "all 1s ease";
//这里的done起始就是afterEnter这个函数，即done是afterEnter函数的引用
//done()
},
afterEnter(el) {
//动画结束后调用
//console.log('ok')
this.flag = !this.flag
}
}
})
</script>
</body>
</html>
除特别声明，本站所有文章均为原创，如需转载请以超级链接形式注明出处：SmartCat's Blog
标签：vue vue html
精华推荐