验证中...
7.21 杭州源创会火热报名中,一起来看看移动开发如何紧跟浪潮?
语言: JavaScript
分类: JavaScript 工具
最后更新于 2018-07-12 15:01
片段 1 片段 2 片段 3 片段 4 片段 5 片段 6
1、Vue使用动画
原始数据 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/velocity/2.0.4/velocity.min.js"></script>
<style>
.fade-enter-active,.fade-leave-active{transition: 1s}
.fade-enter,.fade-leave-to{opacity: 0}
</style>
</head>
<body>
<div id="app">
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="handleclick">切换</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
show:true
},
methods:{
handleclick:function(){
this.show = !this.show
}
}
})
</script>
</body>
</html>
2、使用animate动画
原始数据 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/velocity/2.0.4/velocity.min.js"></script>
<style>
.fade-enter-active,.fade-leave-active{transition: 1s}
.fade-enter,.fade-leave-to{opacity: 0}
</style>
</head>
<body>
<div id="app">
//appear代表加载时展示动画
<transition name="fade"
appear
appear-active-class="animated swing"
enter-active-class="animated swing"
leave-active-class="animated jello"
>
<div v-if="show">hello world</div>
</transition>
<button @click="handleclick">切换</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
show:true
},
methods:{
handleclick:function(){
this.show = !this.show
}
}
})
</script>
</body>
</html>
3、同时使用过渡和动画
原始数据 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/velocity/2.0.4/velocity.min.js"></script>
<style>
.fade-enter-active,.fade-leave-active{transition: 1s}
.fade-enter,.fade-leave-to{opacity: 0}
</style>
</head>
<body>
<div id="app">
<!-- type='transition'以transition的时长为准 -->
<!-- :duration="1000"自定义时长 -->
<!-- :duration="{enter:1000,leave:2000}"自定义时长 -->
<transition name="fade"
type="transition"
appear
appear-active-class="animated swing"
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated jello fade-leave-active"
>
<div v-if="show">hello world</div>
</transition>
<button @click="handleclick">切换</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
show:true
},
methods:{
handleclick:function(){
this.show = !this.show
}
}
})
</script>
</body>
</html>
4、使用js动画
原始数据 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/velocity/2.0.4/velocity.min.js"></script>
<style>
.fade-enter-active,.fade-leave-active{transition: 1s}
.fade-enter,.fade-leave-to{opacity: 0}
</style>
</head>
<body>
<div id="app">
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEenter"
>
<div v-if="show">hello world</div>
</transition>
<button @click="handleclick">velocity</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
show:true
},
methods:{
handleclick:function(){
this.show = !this.show
},
beforeEnter:function(el){
el.style.opacity = 0
},
//动画执行完成后一定要调用done函数,才会执行之后的after-enter钩子函数
enter(el,done){
Velocity(el,{
opacity:1
},{
duration:1000,
complete:done
})
done()
},
afterEenter(el){
console.log('end')
}
}
})
</script>
</body>
</html>
5、多个元素过渡(结合key,否则元素被复用没有动画)
原始数据 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/velocity/2.0.4/velocity.min.js"></script>
<style>
.fade-enter-active,.fade-leave-active{transition: 1s}
.fade-enter,.fade-leave-to{opacity: 0}
</style>
</head>
<body>
<div id="app">
<transition name="fade" mode="out-in">
<div v-if="show3" key="1">hello world</div>
<div v-else key="2">bye world</div>
</transition>
<button @click="handleclick">多元素过度</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
show:true
},
methods:{
handleclick:function(){
this.show = !this.show
}
}
})
</script>
</body>
</html>
6、多组件过渡动画(使用动态组件component)
原始数据 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/velocity/2.0.4/velocity.min.js"></script>
<style>
.fade-enter-active,.fade-leave-active{transition: 1s}
.fade-enter,.fade-leave-to{opacity: 0}
</style>
</head>
<body>
<div id="app">
<transition name="fade" mode="out-in">
<component :is="type"></component>
</transition>
<button @click="handleclick">多元素过度</button>
</div>
<script>
Vue.component('child',{
template:'<div>child</div>'
})
Vue.component('child-one',{
template:'<div>child-one</div>'
})
var vm = new Vue({
el: '#app',
data:{
type: 'child'
},
methods:{
handleclick:function(){
this.type = this.type == 'child' ? 'child-one' : 'child'
}
}
})
</script>
</body>
</html>

评论列表( 0 )

你可以在登录后,发表评论

11_float_left_people 11_float_left_close