数据可视化大屏开发过程中为了让大屏看起来更酷炫我们需要给大屏增加各种动态效果，今天我们来实现大屏下展动画。

动态效果

分析动画

首先我们的动画是先有一个从上到下的展开动画，动画执行完成后，再显示当前模块的内容。

向下展开背景

我们需要准备一个向下展开的背景，背景是自上而下渐变，这个背景默认高度为0

    <!--    向下展开的背景-->
<div class="bg" ref="bg" v-if="!show"></div>

.bg {
  height: 0%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to bottom, rgba(#06415d, 0.3), rgba(#06415d, 0.6));
}

执行动画
接下来我们使用gsap补间动画，来实现展开效果，通过gsap我们让背景的高度从0逐渐增加到100%到达100%后，我们隐藏当前背景，显示其他组件，到这里这样一个展开动画就基本完成了。

gsap.to(this.$refs.bg, {
  height: '100%',
  delay: that.delay,
  duration: that.duration, // 动画持续时间（以秒为单位）
  ease: 'none', // 使用线性动画缓动函数
  onComplete: () => {
    // 动画完成后触发的回调函数
    console.log('动画执行完成');
    setTimeout(() => {
      that.show = true
      // 添加新的 GSAP 动画来改变透明度
      that.$nextTick(() => {
        gsap.to(that.$refs.inner, {
          opacity: 1,
          duration: 1, // 这里可以设置渐显动画的持续时间
        });
      })
    }, 100)
  },
});

我们将这个效果封装成一个组件，我们给组件设置一个动画延迟执行的参数，用以依次执行动画

<template>
  <div class="pageItemBody">
    <div class="pageItemBodyInner" ref="inner" v-if="show">
      <!--      标题-->
      <titleCom :name="name"></titleCom>
      <!--      主题部分-->
      <div class="itemMain">
        <slot></slot>
      </div>
      <!--      图片背景-->
      <div class="bgImg"></div>
    </div>
    <!--    向下展开的背景-->
    <div class="bg" ref="bg" v-if="!show"></div>
  </div>
</template>

<script>

import gsap from 'gsap'
import titleCom from './titleCom.vue'

export default {
  name: "title",
  data() {
    return {
      show: false
    }
  },
  components: {titleCom},
  props: {
    name: {
      type: String,
      default() {
        return '';
      }
    },
    type: {
      type: Number,
      default() {
        return 0;
      }
    },
    icon: {
      type: String,
      default() {
        return '';
      }
    },
    delay: {
      type: Number,
      default() {
        return 0;
      }
    },
    duration: {
      type: Number,
      default() {
        return 0.5;
      }
    },
  },
  mounted() {
    var that = this;
    gsap.to(this.$refs.bg, {
      height: '100%',
      delay: that.delay,
      duration: that.duration, // 动画持续时间（以秒为单位）
      ease: 'none', // 使用线性动画缓动函数
      onComplete: () => {
        // 动画完成后触发的回调函数
        console.log('动画执行完成');
        setTimeout(() => {
          that.show = true
          // 添加新的 GSAP 动画来改变透明度
          that.$nextTick(() => {
            gsap.to(that.$refs.inner, {
              opacity: 1,
              duration: 1, // 这里可以设置渐显动画的持续时间
            });
          })
        }, 100)
      },
    });
  },
}
</script>

<style lang="scss" scoped>
.pageItemBody {
  width: 100%;
  position: relative;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  z-index: 1;
  align-content: flex-start;
  border-radius: 5px;
}

.pageItemBodyInner {
  width: calc(100% - 0px);
  position: relative;
  height: 100%;
  display: flex;
  //background: url("./assets/itembg.png") center center no-repeat;
  //background-size: 100% 100%;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  z-index: 1;
  align-content: flex-start;
  opacity: 0;
}

.bg {
  height: 0%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to bottom, rgba(#06415d, 0.3), rgba(#06415d, 0.6));
}


.bgImg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: calc(100% - 0px);
}

.itemMain {
  position: relative;
  width: calc(100% - 0px);
  margin-left: 0px;
  height: calc(100% - 52px);
  margin-top: 10px;
  z-index: 10;
}

</style>

使用组件

我们设置标题，设置动画持续事件，以及动画延迟执行的时间。这样一个下展的动画组件就完成了。

<item name="已报到新生性别情况" :duration="0.5" :delay="0">
<item1></item1>
</item>