Vue样式与动画

自定义实现动画

单元素动画—transition(过渡类名)

进入：两个时间点：v-enter v-enter-to
一个时间段：v-enter-active
离开：两个时间点：v-leave v-leave-to
一个时间段：v-leave-active

<style>
        /* v-enter 进入之前 */
        /* v-leave-to 离开之后 */
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(80px);
        }

        /* v-enter-active 入场时间段 */
        .v-enter-active,
        .v-leave-active{
            transition: all 0.8s ease;
        }
    </style>

多元素动画

        <transition name="my">
            <h3 v-if="flag2">这是一个h3</h3>
        </transition>

<style>
        /* 修改前缀:不同组的动画 */
        .my-enter,
        .my-leave-to{
            opacity: 0;
            transform:translateY(80px)
        }
        .my-enter-active,
        .my-leave-active{
            transition: all 0.8s ease;
        }
    </style>

表格动画

使用transition-group动画类包裹表格元素

1. .v-move{ transition:all 0.6s ease} 移动时动画 ++ .v-leave-active{position:absolute}
   实现删除列表时渐渐的飘上来
2. li:hover{ background-color: red; transition: all 0.6s ease }

<transition-group>
      <li v-for="item in list" :key="item.id">
           {{item.id}}---{{item.name}}
      </li>
</transition-group>

第三方animate.css实现动画

<link rel="stylesheet" href="./lib/animate.css">
        <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="{ enter:200,levate:500}">
            <h3 v-if="flag3">这是一个h3</h3>
        </transition>

动画钩子函数实现动画(细粒度)

el: 表示要执行的原生JS Dom元素,可理解为document.getElementById(’’)方式获取到的Dom对象
执行特点：每次都会循环执行，每一次执行完毕后，都会执行before-enter钩子函数

1. 定义一个小球

<transition>
            <div class="ball" v-show="flag"></div>
</transition>

  <style>
        .ball{
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
        }
  </style>

2. 动画过度类包装元素，并声明动画钩子函数

 <transition @before-enter="beforeEnter"
                   @enter="enter"
                   @after-enter="afterEnter">
           <div class="ball" v-show="flag"></div>
 </transition>

3. 编写 动画钩子函数

methods:{
                 //el表示js原生对象
                 beforeEnter(el) { //动画开始【
                    el.style.transform = "translate(0,0)"
                 },
                 enter(el,done){  //动画结束()
                    el.offsetWidth
                    el.style.transform = "translate(150px,450px)"
                    el.style.transition = "all 1s ease"
                    
                    done()//调用下面函数
                 },
                 afterEnter(el){ //动画结束后】
                     this.flag=!this.flag
                 }
},