正文
Vue中Js动画 与Velocity.js 多组件多元素 列表过渡
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
Vue提供我们很多js动画钩子
写在tansition标签内部
入场动画
@before-enter="" 处理函数收到一个参数（e l） el为这个元素
@enter=""处理函数收到二个参数（e l， done）done（） 为动画结束
@after-enter=""处理函数收到一个参数（e l）
出场动画
@before-leave="" 处理函数收到一个参数（e l） el为这个元素
@leave=""处理函数收到二个参数（e l， done）done（） 为动画结束
@after-leave=""处理函数收到一个参数（e l）
js常用动画库 Velocity.js 动画库
其他写法一样，只是在处理函数中用
Velocity(el, {opacity:1), {duration:1000 complete:done })
Vue中多个元素或组件的过渡多个元素的时候过渡
可以在transition中 加mode="in-out" 意思先进后出
因为VUE有DOM复用 当标签不能显示的时候 添加key
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
.fade-enter,
.fade-leave-to {
opacity: 0
} .fade-leave-active,
.fade-enter-active {
transition:opacity 2s
}
</style>
</head>
<body>
<section class="app">
<transition name="fade" mode="out-in">
<div v-if="show" key="one">Frames</div>
<div v-else key="two">Velocity</div>
</transition>
<button @click="handle">Option</button>
</section><script>
var vm = new Vue({
el:".app",
data: {
show: true
},
methods: {
handle: function () {
this.show = !this.show
}
}
})
</script>
</body>
多个组件的过渡<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
.fade-enter,
.fade-leave-to {
opacity: 0
} .fade-leave-active,
.fade-enter-active {
transition:opacity 2s
}
</style>
</head>
<body>
<section class="app">
<transition name="fade" mode="out-in">
<component :is="type"></component>
</transition>
<button @click="handle">Option</button>
</section><script>
Vue.component("child-one", {
template:"<p>child-one</p>"
}) Vue.component("child-two", {
template:"<p>child-two</p>"
}) var vm = new Vue({
el:".app",
data: {
type: "child-one"
},
methods: {
handle: function () {
this.type = this.type === "child-one" ? "child-two" : "child-one"
}
}
})
</script>
</body>
Vue中列表过渡
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
.fade-enter,
.fade-leave-to {
opacity: 0
} .fade-leave-active,
.fade-enter-active {
transition:opacity 2s
}
</style>
</head>
<body>
<section class="app">
<transition name="fade" mode="out-in">
<component :is="type"></component>
</transition>
<button @click="handle">Option</button>
</section><script>
Vue.component("child-one", {
template:"<p>child-one</p>"
}) Vue.component("child-two", {
template:"<p>child-two</p>"
}) var vm = new Vue({
el:".app",
data: {
type: "child-one"
},
methods: {
handle: function () {
this.type = this.type === "child-one" ? "child-two" : "child-one"
}
}
})
</script>
</body>
需要用到一个标签transition-group
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
.v-enter,
.v-leave-to {
opacity: 0
} .v-enter-active,
.v-enter-active {
transition:opacity 2s
}
</style>
</head>
<body>
<section class="app">
<transition-group>
<article v-for="(item, index) of list" :key="item.id">{{item.title}}</article>
</transition-group>
<button @click="handle">Select</button></section><script>
var count = 0
var vm = new Vue({
el: ".app",
data: {
list: []
},
methods: {
handle: function () {
this.list.push({
id: count++,
title:"Velocity"
})
}
}
})
</script>
