Vue动画
在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库,如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库,如 Velocity.js
列表动画效果
- transition这个过渡, 内里只能有一个根元素,且只对根元素起作用
- duration: 控制Vue设置的类名存在的时间,但是动画效果还是C3设定的时间完成,duration只是延长类名存在时间
li{
background-color: hotpink;
transition: all 1s ease;
}
定义动画开始和结束前的状态.v-enter,.v-leave-to{
transform: translateY(30px);
}
定义动画开始和结束过程中的状态.v-enter-active,.v-leave-active{
transition: all 0.7s ease;
}
1.定义元素位置除了display:none外,移动的效果
2.move和leave-active 必须结合起来使用
3.在结构元素节点上定义 appear 属性 使初始视图具有出场的效果.v-move{
transition: all 0.7s ease;
}
.v-leave-active{
position: absolute;
}