zoukankan      html  css  js  c++  java
  • vue学习(8)-过渡transition&动画animate

     
    进入之前                                                    离开之后
    v-enter---v-enter-to            v-leave-to---v-leave    时间点
        v-enter-active                        v-leave-active    时间段
     
    一,
    <transition name="my">    //修改前缀名
    .v-enter-active{
    transiton:all .8s ease
    }
    .my-enter{
    transform:translateX(80px);
    opacity:0;
    }
     
    二,
    第三方animate.css
    <link>
    入场bounceIn
    离场bounceOut
    <transition enter-active-class="animated bounceIn">   //一定要写animated
    :duration="{enter :500,leave:0}"//持续时间 毫秒
     
    三,
    半场动画
    <transition @before-enter="beforeEnter">
    methods:{
    beforeEnter(el){ 
       
    },
    enter(el,done)
        offsetHeight//触发刷新
        ...
        done
    }
     
    四,
    v-for :key
    <transition-group>
  • 相关阅读:
    文件操作
    数据补充
    小数据池
    列表
    基础知识1
    我的Python之旅开始
    正则
    模块
    迭代器与生成器
    文件操作
  • 原文地址:https://www.cnblogs.com/monica4/p/11267388.html
Copyright © 2011-2022 走看看