Vue-transition

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; }

-------------本文结束感谢您的阅读-------------