vue 2.0 transition学习笔记
2017-03-04 00:04
609 查看
<transition name="fade">
运动东西(元素，属性、路由....)
</transition>
class定义:
.fade-enter{} //初始状态
.fade-enter-active{} //变化成什么样 -> 当元素出来(显示)
.fade-leave{}
.fade-leave-active{} //变成成什么样 -> 当元素离开(消失)
如何animate.css配合用？
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<p v-show="show"></p>
</transition>
多个元素运动:
<transition-group enter-active-class="" leave-active-class="">
<p :key=""></p>
<p :key=""></p>
</transition-group>
栗子1（普通动画）:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
width:300px;
height:300px;
background: red;
}
.fade-enter-active,.fade-leave-active{
transition: 1s all ease;
}
.fade-enter-active{
/*变化成什么样->当元素出来时（显示）*/
opacity: 1;
width:300px;
height:300px;
}
.fade-leave-active{
/*变化成什么样->当元素离开时（消失）*/
opacity: 0;
width:100px;
height:100px;
}
.fade-enter,.fade-leave{
/*初始状态*/
opacity: 0;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition name="fade" mode="">
<p v-show="show"></p>
</transition>
</div>
<script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#box",
data:{
show:false
}
})
}
</script>
</body>
</html>
栗子2（相关函数）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
width:300px;
height:300px;
background: red;
}
.fade-enter-active,.fade-leave-active{
transition: 1s all ease;
}
.fade-enter-active{
/*变化成什么样->当元素出来时（显示）*/
opacity: 1;
width:300px;
height:300px;
}
.fade-leave-active{
/*变化成什么样->当元素离开时（消失）*/
opacity: 0;
width:100px;
height:100px;
}
.fade-enter,.fade-leave{
/*初始状态*/
opacity: 0;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition name="fade" @before-enter="beforeEnter"
@enter="enter" @after-enter="afterEnter"
@before-leave="beforeLeave" @leave="leave"
@after-leave="afterLeave"
>
<p v-show="show"></p>
</transition>
</div>
<script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#box",
data:{
show:false
},
methods:{
beforeEnter(el){
console.log('动画enter之前');
console.log(el)
},
enter(el){
console.log('动画enter进入'),
console.log(el)
},
afterEnter(el){
console.log('动画进入之后'),
console.log(el),
el.style.background="blue"
},
beforeLeave(el){
console.log('动画leave之前');
console.log(el)
},
leave(el){
console.log('动画leave进入'),
console.log(el)
},
afterLeave(el){
console.log('动画离开之后'),
console.log(el),
el.style.background="red"
}
}
})
}
</script>
</body>
</html>
栗子3（配合animate）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<style>
p{
width:100px;
height:100px;
background: red;
margin:0 auto;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition enter-active-class="zoomInLeft"
leave-active-class="zoomOutRight"
>
<p v-show="show" class="animated"></p>
</transition>
</div>
<script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#box",
data:{
show:false
}
})
}
</script>
</body>
</html>
栗子4（多个元素）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<style>
p{
width:100px;
height:100px;
background: red;
margin:10px auto;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition-group enter-active-class="zoomInLeft"
leave-active-class="zoomOutRight"
>
<p v-show="show" class="animated" :key="1"></p>
<p v-show="show" class="animated" :key="2"></p>
</transition-group>
</div>
<script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#box",
data:{
show:false
}
})
}
</script>
</body>
</html>
栗子5（多个元素循环输出）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<style>
p{
width:100px;
height:100px;
background: red;
margin:10px auto;
}
</style>
</head>
<body>
<div id="box">
<input type="text" v-model="show">
<transition-group enter-active-class="zoomInLeft"
leave-active-class="zoomOutRight"
>
<p class="animated" v-show="show" v-for="(val,index) in lists" :key="index">
{{val}}
</p>
</transition-group>
</div>
<script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#box",
data:{
show:'',
list:['apple','banana','orange','pear']
},
computed:{
lists:function(){
var arr=[];
this.list.forEach(function(val){
if(val.indexOf(this.show)!=-1){
arr.push(val);
}
}.bind(this));
return arr;
}
}
});
}
</script>
</body>
</html>
运动东西(元素，属性、路由....)
</transition>
class定义:
.fade-enter{} //初始状态
.fade-enter-active{} //变化成什么样 -> 当元素出来(显示)
.fade-leave{}
.fade-leave-active{} //变成成什么样 -> 当元素离开(消失)
如何animate.css配合用？
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<p v-show="show"></p>
</transition>
多个元素运动:
<transition-group enter-active-class="" leave-active-class="">
<p :key=""></p>
<p :key=""></p>
</transition-group>
栗子1（普通动画）:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
width:300px;
height:300px;
background: red;
}
.fade-enter-active,.fade-leave-active{
transition: 1s all ease;
}
.fade-enter-active{
/*变化成什么样->当元素出来时（显示）*/
opacity: 1;
width:300px;
height:300px;
}
.fade-leave-active{
/*变化成什么样->当元素离开时（消失）*/
opacity: 0;
width:100px;
height:100px;
}
.fade-enter,.fade-leave{
/*初始状态*/
opacity: 0;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition name="fade" mode="">
<p v-show="show"></p>
</transition>
</div>
<script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#box",
data:{
show:false
}
})
}
</script>
</body>
</html>
栗子2（相关函数）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
width:300px;
height:300px;
background: red;
}
.fade-enter-active,.fade-leave-active{
transition: 1s all ease;
}
.fade-enter-active{
/*变化成什么样->当元素出来时（显示）*/
opacity: 1;
width:300px;
height:300px;
}
.fade-leave-active{
/*变化成什么样->当元素离开时（消失）*/
opacity: 0;
width:100px;
height:100px;
}
.fade-enter,.fade-leave{
/*初始状态*/
opacity: 0;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition name="fade" @before-enter="beforeEnter"
@enter="enter" @after-enter="afterEnter"
@before-leave="beforeLeave" @leave="leave"
@after-leave="afterLeave"
>
<p v-show="show"></p>
</transition>
</div>
<script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#box",
data:{
show:false
},
methods:{
beforeEnter(el){
console.log('动画enter之前');
console.log(el)
},
enter(el){
console.log('动画enter进入'),
console.log(el)
},
afterEnter(el){
console.log('动画进入之后'),
console.log(el),
el.style.background="blue"
},
beforeLeave(el){
console.log('动画leave之前');
console.log(el)
},
leave(el){
console.log('动画leave进入'),
console.log(el)
},
afterLeave(el){
console.log('动画离开之后'),
console.log(el),
el.style.background="red"
}
}
})
}
</script>
</body>
</html>
栗子3（配合animate）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<style>
p{
width:100px;
height:100px;
background: red;
margin:0 auto;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition enter-active-class="zoomInLeft"
leave-active-class="zoomOutRight"
>
<p v-show="show" class="animated"></p>
</transition>
</div>
<script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#box",
data:{
show:false
}
})
}
</script>
</body>
</html>
栗子4（多个元素）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<style>
p{
width:100px;
height:100px;
background: red;
margin:10px auto;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition-group enter-active-class="zoomInLeft"
leave-active-class="zoomOutRight"
>
<p v-show="show" class="animated" :key="1"></p>
<p v-show="show" class="animated" :key="2"></p>
</transition-group>
</div>
<script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#box",
data:{
show:false
}
})
}
</script>
</body>
</html>
栗子5（多个元素循环输出）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<style>
p{
width:100px;
height:100px;
background: red;
margin:10px auto;
}
</style>
</head>
<body>
<div id="box">
<input type="text" v-model="show">
<transition-group enter-active-class="zoomInLeft"
leave-active-class="zoomOutRight"
>
<p class="animated" v-show="show" v-for="(val,index) in lists" :key="index">
{{val}}
</p>
</transition-group>
</div>
<script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#box",
data:{
show:'',
list:['apple','banana','orange','pear']
},
computed:{
lists:function(){
var arr=[];
this.list.forEach(function(val){
if(val.indexOf(this.show)!=-1){
arr.push(val);
}
}.bind(this));
return arr;
}
}
});
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Vue 2.0学习笔记：组件的使用
- Vue 2.0学习笔记之Vue中的computed属性
- vue.js 2.0 学习笔记
- vue学习笔记04——vue2.0的变化
- Vue 2.0学习笔记：实现组件数据的双向绑定
- vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
- Vue 2.0学习笔记：自定义指令
- vue2.0笔记---transition填坑
- Vue 2.0学习笔记：组件数据传递
- Vue 2.0学习笔记：Vue组件内容分发（slot）
- VUE2.0 全套 demo 讲解（学习笔记）
- Vue 2.0学习笔记之使用$refs访问Vue中的DOM
- Vue 2.0的学习笔记： Vue实例和生命周期
- node+webpack环境搭建 vue.js 2.0 基础学习笔记
- vue2.0 路由 学习笔记
- vue学习笔记之vue1.0和vue2.0的区别介绍
- ASP.NET 2.0入门经典学习笔记.txt
- maven2.0学习笔记[摘]
- SP.NET 2.0入门经典学习笔记2.txt
- Pro visua 4000 l c++/cli and .net 2.0 platform2 学习笔记（6 第二章 C++/CLI基础=1 ）