__206 动画

进入

v-enter 起点
v-enter-to 目的点
v-enter-active 进入的时间

离开

v-leave 目的点
v-leave-to 终点
v-leave-active 离开的时间

1.原生动画的基本使用

1.可切换的元素

2.使用 transition 包裹动画元素

3.设置动画的样式

设置起点和终点的状态和位置

设置进入和离开的时间

/* 设置起点和终点的状态和位置 */
      .kk-enter,
      .kk-leave-to {
        transform: translateX(300px);
        opacity: 0;
      }

      .kk-enter-active,
      .kk-leave-active {
        transition: all 0.5s ease;
      }

<transition name="kk">
   <div v-show="isShow">显示隐藏</div>
</transition>

new Vue({
  el: "#app",
  data: {
    isShow: false,
  },
});

2.第三方动画 animate.css

enter-active-class 设置进入动画

leave-active-class 设置离开的动画

duration 设置动画的时间 时间超过1000--失效不起作用

--number / string 统一配置进入和离开的时间    :duration="800"

--object    :duration="{} enter: 500, leave: 300"

<link rel="stylesheet" href="./lib/animate.min.css" />

<button @click="isShow=!isShow">toggle</button>

<transition
  enter-active-class="fadeInRight"
  leave-active-class="fadeOutRight"
  :duration="{enter: 800, leave: 300}"
>
  <div v-show="isShow" class="animated">嚯嚯嚯嚯</div>
</transition>

new Vue({
  el: "#app",
  data: {
    isShow: false,
  },
});

3.列表动画

transition-group

/* 设置起点和终点的状态和位置 */
.kk-enter,
.kk-leave-to {
  transform: translateX(300px);
  opacity: 0;
}

.kk-enter-active,
.kk-leave-active {
  transition: all 0.5s ease;
}

<button @click="add">add</button>
<!-- 
  appear 设置进入页面立即开启动画
  transition-group 用于实现列表动画
 -->
<transition-group name="kk" appear>
  <p v-for="item in list" :key="item">{{item}}</p>
</transition-group>

new Vue({
  el: "#app",
  data: {
    list: [1, 2, 3, 4],
  },
  methods: {
    add() {
      this.list.push(Date.now());
    },
  },
});

## 4.半场动画  js钩子

​```js
<div id="app">
<button @click="toggle" :disabled="disabled">toggle</button>
<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
>
  <div v-show="flag">商品</div>
</transition>
</div>

 new Vue({
  el: "#app",
  data: {
    flag: false,
    disabled: false,
  },
  methods: {
    // el 添加了动画的元素的DOM
    beforeEnter(el) {
      // console.log(1);
      // 设置进入之前的位置
      el.style.transform = "translate(0,0)";
      console.log(1);
    },
    enter(el, done) {
      console.log(2);

      // 相当于强制刷新
      el.offsetLeft;
      el.style.transform = "translate(300px,300px)";
      el.style.transition = "all 1s ease";
      done(); // done 就是afterEnter的回调函数
    },
    afterEnter() {
      console.log(3);

      this.flag = !this.flag;
    },
    toggle() {
      this.flag = !this.flag;
      this.disabled = true;
      this.timer = setTimeout(() => {
        this.disabled = false;
      }, 1001);
    },
  },
  beforeDestroy() {
    // 卸载延时器
    clearTimeout(this.timer);
  },
});

‍