(四)Vue中的动画嵌套

(一)Vue中的动画嵌套

(1)平时我们创建动画都使用的是transition标签

<transition name="fade">


</transition>
<style>
.fade-enter{}
.fade-enter-active{}
.fade-leave{}
.fade-leave-active{}
</style>

基本上我们都那么写，但是比如说一个元素我希望他一边移动一边滚动那该怎么办？

(2)这个时候我们就需要分层了

例如

<transition name="fade">
 <div class="desc">
<div class="innerbox"></div>  
</div>
</transition>
<style>
@keyframes bounce-in {
  0% {
    transform: translate(0.56rem, 0);
    opacity: 0;
  }
  25% {
    transform: translate(0.48rem, 0);
    opacity: 0.25;
  }
  50% {
    transform: translate(0.28rem, 0);
    opacity: 0.5;
  }
  75% {
    transform: translate(0.19rem, 0);
    opacity: 0.75;
  }
  100% {
    transform: translate(0rem, 0);
    opacity: 1;
  }
}
.desc {
    width: 0.48rem;
    color: #fff;
    line-height: 0.46rem;
    height: 0.48rem;
    border-radius: 50%;
    background: #0190d4;
    text-align: center;
    float: left;
    .in_move {
      width: 0.48rem;
      height: 0.48rem;
      transform: rotate(0deg);
      transition: all 0.4s;
    }
    &.fade-enter,
    &.fade-leave {
      .in_move {
        transform: rotate(360deg);
      }
    }
    &.fade-enter-active {
      animation: bounce-in 0.4s linear;
    }
    /*动画开始到结束有*/

    &.fade-leave-active {
      animation: bounce-in 0.4s linear reverse;
    }
  }
</style>

这样做的好处就是横向就是平移，然后里面的元素就是滚动。要是把rotate写道关键帧里面他会直接滚动

(3)但是有的时候CSS满足不了我们需要的动画必须要通过JS来解决，那只有利用钩子函数了

 <transition v-for="(item,index) in balls"
                  :key="index"
                  @before-enter='beforeEnter'
                  @enter='enter'
                  @after-enter='afterEnter'>
        <div v-show="item.show"
             class="ball">
          <!--里面还需要一层是内层,因为最外层是横向移动，里面是纵向移动-->
          <div class="inner inner-hook"></div>
        </div>
      </transition>

这样在过渡动画里面里面可以利用before-enter, enter, after-enter这3个钩子函数来实现
同理离开也一样,特别注意传递的是元素

beforeEnter(el){
 //他获取到的就是那个要执行动画的元素
console.log(el)
}