vue高级功能-过渡动画

vue的过渡效果可以通过两种方式

  1. css过渡
    vue高级功能-过渡动画_第1张图片
    vue高级功能-过渡动画_第2张图片
    vue高级功能-过渡动画_第3张图片
    注:
    fade-enter-active和fade-leave-active表示过渡的两个阶段
    all表示这个元素所以的css属性都实现过渡效果,当然也可以个别指定,比如指定透明度opacity,0.5s表示过渡的时间,easy-out表示线性过渡
    除了渐隐渐显,还有其他动画
    这里除了用v-show还可以用v-if,还可以用动态的组件,动态组件可通过is属性来实现
    多元素动画效果可以通过切换组件来实现也可以通过v-if和v-else结合来实现(多元素过渡的时候如果标签名相同,那么标签上要加key属性,不然就会出问题),transform还有mode属性来控制元素的进出顺序
    vue高级功能-过渡动画_第4张图片
    vue高级功能-过渡动画_第5张图片

你可能感兴趣的:(前端学习笔记)