vue+create-keyframe-animation实现slideDown与slideUp

实现slideDown和slideUp可以用transition也可以用animation，本文用create-keyframe-animation动态实现。

<template>
  <div>
    <button @click="showDiv = !showDiv">测试</button>
    <transition
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
      v-on:leave="leave"
      v-on:after-leave="afterLeave"
    >
      <div :class="[showDiv ? 'is-show' : 'is-hide', 'pbox']" v-show="showDiv">
        <p>测试1</p>
        <p>测试2</p>
        <p>测试3</p>
        <p>测试4</p>
        <p>测试5</p>
      </div>
    </transition>
    <div>ceshi</div>
  </div>
</template>
<script>
import animations from "create-keyframe-animation";

export default {
  data() {
    return {
      showDiv: true,
      animationName: "slideUp",
    };
  },
  methods: {
    animationGenerate(el, done, animationName, isReverse = false) {
      // 定义动画内容
      const animation = {
        0: {
          height: 0,
        },
        100: {
          height: `${el.scrollHeight}px`,
        },
      };
      // 注册动画
      animations.registerAnimation({
        name: animationName, // 动画名称
        animation, // 动画
        presets: {
          // 预设项
          duration: 200, // 持续时间
          easing: "linear", // 时间函数
          direction: isReverse ? "reverse" : "normal",
        },
      });
      done
        ? animations.runAnimation(el, animationName, done)
        : animations.runAnimation(el, animationName);
    },
    enter: function (el, done) {
      this.animationGenerate(el, done, this.animationName);
    },
    afterEnter(el) {
      animations.unregisterAnimation(this.animationName);
      // 这里用了scrollHeight 因为拿不到height和offsetHeight
      el.style.cssText = `height: ${el.scrollHeight}px`;
    },
    leave(el) {
      this.animationGenerate(el, false, this.animationName, true);
    },
    afterLeave(el) {
      animations.unregisterAnimation(this.animationName);
      el.style.cssText = `height: 0`;
    }
  }
};
</script>
<style scoped>
.pbox {
  overflow: hidden;
  will-change: auto;
}
</style>

关键是未知块元素高度时候用什么获取，这里用scrollHeight。

后来发现有同学用了transition来实现的版本。比我这个简单。

https://www.cnblogs.com/moqiutao/p/10552736.html

 

主要注意的是：slideDown与slideUp都借助transition来实现只能在display部位none的情况下。如果display：none，transition将会失效。