文章目录
动画创建方式
- vue创建
- animate.css创建
- 钩子函数创建
- 第三个vue标签transition
- 第四个vue标签transition-group
vue创建
- v-enter
- v-enter-active
- v-enter-to
- v-leave
- v-leave-active
- v-leave-to
- v-move和v-leave-to
创建
<style>
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateY(90px);
}
.v-enter-active,.v-leave-active{
transition: all 0.4s ease;
}
</style>
</head>
<body>
<div id="app">
<button @click="flag=!flag">点击</button>
<transition>
<h1 v-show="flag">我是动画</h1>
</transition>
</div>
<script>
new Vue({
el:"#app",
data:{
flag: true
}
})
</script>
预览
animate.css创建
- 下载animate.css
- 标签上使用enter-active-class leave-active-class
引入
<link rel="stylesheet" href="./lib/animate.min.css">
使用
<div id="app">
<button @click="flag=!flag">点击</button>
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :durction="200">
<h1 v-show="flag" class="animated" >我是动画</h1>
</transition>
</div>
<script>
new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
预览
- durction
- 一个参数 :durction=“200”
- 一个对象:durction="{enter:200,leave:400}"
钩子函数创建
- @before-enter
- @enter
- @after-enter
- @before-leave
- @leave
- @ after-leave
半场动画(加入购物车)
- 使用
- 预览
使用(入场动画)
<style>
#bull{
height: 20px;
width: 20px;
background: orange;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="app">
<button @click="flag=!flag">点击</button>
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div id="bull" v-if="flag"></div>
</transition>
</div>
<script>
new Vue({
el:"#app",
data:{
flag:false
},
methods:{
beforeEnter(el){
el.style.transform="translate(0,0)"
},
enter(el,done){
el.offsetHeight
el.style.transition="all 0.4s ease"
el.style.transform="translate(300px,500px)"
done()
},
afterEnter(el){
this.flag=!this.flag
}
}
})
</script>
预览
- 三个函数:before-enter enter after-enter
- 第一个参数都为当前绑定上去的元素transition
- before-enter:是初始状态元素的样式
- enter:是结束的状态+过渡样式
- el.offsetWidth 必须有宽高左右都行,保证有过渡动画
- transition 控制过渡样式
- 第二个参数done 是一个函数(隐式代表after-enter),保证立即执行动画 - after-enter: 控制动画的转换,flag的作用
- 保证动画函数的跳转
- 直接跳过下半场动画,保证每次点击的初始位置都一样
- 不能使用透明度控制,无效
动画的分类
- transition 单组动画
- 结合name属性可以定义不同的动画
- transition-group 动画组
- 用于动态创建的元素(v-for)
transition
- name 控制不同元素
- mode 一入场 out-in
name 同一页面的多个动画
使用
<style>
.my-enter,.my-leave-to{
transform: translate(300px,500px);
}
.my-enter-active,.my-leave-active{
transition: all 0.3s ease;
}
</style>
</head>
<body>
<div id="app">
<button @click="flag=!flag">点击</button>
<transition name="my">
<h1 v-if="flag">动画啊</h1>
</transition>
</div>
<script>
new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
预览
transition-group
- appear 属性 一入场
- tag 改变动画容器 默认为span
appear
tag
使用
<style>
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateY(90px);
}
.v-enter-active,.v-leave-active{
transition: all 0.4s ease;
}
.v-move{
transition: all 0.4s ease;
}
.v-leave-active{
position: absolute;
}
ul,li{
margin: 0;
padding: 0;
}
li{
line-height: 45px;
border: 1px dashed pink;
margin: 5px;
width: 100%;
}
li:hover{
cursor: pointer;
background: skyblue;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="id">
<input type="text" v-model="name">
<button @click="add">添加</button>
<transition-group appear tag="ul">
<li v-for="(item,index) in info" :key="item.id" @click="del(item.index)">{{item.id}}====={{item.name}}</li>
</transition-group>
</div>
<script>
new Vue({
el:"#app",
data:{
id:0,
name:"",
info:[
{id:1,name:"sheep"},
{id:2,name:"lay"},
{id:3,name:"zhang"}
]
},
methods:{
add(){
let obj={
id: this.id,
name:this.name
}
this.info.push(obj)
},
del(id){
this.info.splice(id,1);
}
}
})
</script>
预览
- v-move 保证动画移动都有过渡
- :key养成习惯绑定
总结
- 动画分组处理
- enter leave-to
- enter-active leave-active
- 动画创建
- vue的v-enter等可以改变成自己的如:my-enter
- animate.css 里面的类在transition上使用 enter-active-class=“bounceIn” 基础类animated
- 钩子函数:@before-enter 等 done和offset
- 新学了两个vue标签
- transition mode=“out-in” 入场 name属性
- transition-group appear tag 属性
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
