嵌套元素动画

可以使用vue的Transition标签, 标签内只能有一个元素, 且元素受到v-show或者v-if控制, 这也是触发动画的关键, Transition可以嵌套使用

<template>
...
<Transition name="bounce" appear>
        <div class="bounce-box" v-show="!isClose" @click="handleChange">
          <Transition name="smooth" appear>
          	<div class="smooth-box" v-show="!isClose"></div>
          </Transition >
        </div>
</Transition>    
...
</template>

<style scoped>
.smooth-enter-active {
  animation: smooth-in 0.5s;
}
.smooth-leave-active {
  animation: smooth-in 0.5s reverse;
}
@keyframes smooth-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    //transform: translateX(-100%);
    background: transparent;
  }
  100% {
    //transform: translateX(0);
    background: rgba(41, 46, 57, 0.6);
  }
}
</style>