Vue 动画

vue 动画的

 

 

1. vue 把一个完整的动画，拆分了两个部分，一个是出厂动画，一个是入场动画

2. 入场动画中，包含；两个时间点，分别是进入之前（v-enter） ,进入之后（v-enter-to）；

3. v-enter 表示，动画入场之前的起始状态，比如，透明度为0,横向偏移量为50px；

4. v-enter-to 表示，动画入场完成孩子后的终止状态，比如：透明度为1, 横向偏移为0px；

5. v-enter-ative 表示入场动画的时间段，在这里。可以规定动画的时间长们还有一些相关的动画效果ease

使用钩子函数，实现购物车小球运动

htnl代码

<template>
      <!-- 小球运动 -->
     <!--  这个是触发小球运动--> 
    <div @click="flag = !flag">小球</div>
           <transition
              @before-enter="beforeEnter"
              @enter="enter"
              @after-enter="afterEnter"
              >
         <div class="ball" v-show="flag"></div>
      </transition>
</template

 

js代码

 <script>
    data(){
     return{
         flag:false
     }
   },
    methods:{
        // 注意：动画的钩子函数第一个参数:el,表示：要执行的动画的那个dom元素，是一个原生的js，Dom对象
    //  可以认为：el是通过 document.getElementById('')方式获取到原生的js Dom对象
    beforeEnter(el) {
      // beforeEenter 表示动画入场之前，此时。动画尚未开始。可以在beforeEnter 中设置元素的开始动画之前的起始样式
      // 设置 小球开始动画之前的，起始位置
      el.style.transform = "translate(0,0 )";
    },
    enter(el, done) {
      // 这个是强制动画（Height，Top，lefft，）
      el.offsetWidth;
      //enter 表示动画开始只求的样式可以设置小球完成动画的结束状态,translate的两个参数是小球运动的坐标：
      el.style.transform = "translate(150px,100px)";
      // 这个是动画的秒数为1秒
      el.style.transition = "all 1s ease";
      // 这个相当与调用afterEnter这个方法
      done();
    },
    afterEnter(el) {
      // 小球动画结构结束之后的回调函数们用来做一些清理工作
      this.flag = !this.flag;
    },        
     }
  </script>

css代码

<style scoped>
.ball {
  width: 15px;
  height: 15px;
  background: red;
  border-radius: 20px;
}
</style>