动画

@keyframes animationName{
  0%{
    /* 动画开始的样式表 */
    opacity: 0;
  }
  100%{
    /* 动画结束的样式表 */
    opacity: 1;
  }
}

.div{
  /* 使用动画开始的样式表 */
  opacity: 0;
  /* 动画名称 */
  animation-name: animationName;
  /* 过渡时间 */
  animation-duration: .3s;
  /* 保持动画结束状态 */
  animation-fill-mode: forwards;
  /* 缓动动画 */
  animation-timing-function: ease-in-out;
}

/* 也可以这样写 */
.div{
  opacity: 0;
  animation: animationName .3s forwards ease-in-out;
}

.div{
  /* 延迟1秒实现动画 */
  animation-delay: 1s;
  /* ...实现动画 */
}

.div{
  transition: all .3 ease-in-out;
}

<template>
  <div>
    <div @click="showAnimation">按钮</div>
    <div class="div" ref="box"></div>
  </div>
</template>

<script>
export default {
	methods: {
    showAnimation(){
      this.$refs.box.style.opacity=1;
    }
  }
}
</script>

<style scoped>
  .div{
    opacity: 0;
    background-color: red;
    transition: all .3 ease-in-out;
  }
</style>