vue-vue2脚手架11-Vue封装的与动画过度
-
作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。
-
图示
-
写法:
-
准备好样式:
- 元素进入的样式:
- v-enter:进入的起点
- v-enter-active:进入过程中
- v-enter-to:进入的终点
- 元素离开的样式:
- v-leave:离开的起点
- v-leave-active:离开过程中
- v-leave-to:离开的终点
- 元素进入的样式:
-
使用
<transition>
包裹要过度的元素,并配置name属性:<transition name="hello"> <h1 v-show="isShow">你好啊!</h1> </transition>
-
备注:若有多个元素需要过度,则需要使用:
<transition-group>
,且每个元素都要指定key
值。
-
-
引入animate.css 动画效果
- npm install animate.css
- vue引入:import ‘animate.css’
MyList.vue
这里用的是 transition-group,因为是多条数据
<template>
<ul class="todo-main">
<transition-group name="todo" appear>
<MyItem
v-for="todoObj in todos" :key="todoObj.id"
:todo="todoObj"
:deleteTodo="deleteTodo"
/>
</transition-group>
</ul>
</template>
<script>
import MyItem from './MyItem'
export default {
name:'MyList',
components:{MyItem},
props:['todos','deleteTodo'],
}
</script>
<style scoped>
/*main*/
.todo-main {
margin-left: 0px;
border: 1px solid #ddd;
border-radius: 2px;
padding: 0px;
}
.todo-empty {
height: 40px;
line-height: 40px;
border: 1px solid #ddd;
border-radius: 2px;
padding-left: 5px;
margin-top: 10px;
}
.todo-enter-active{
animation: atguigu 0.5s linear;
}
.todo-leave-active{
animation: atguigu 0.5s linear reverse;
}
@keyframes atguigu {
from{
transform: translateX(100%);
}
to{
transform: translateX(0px);
}
}
</style>