Vue中的动画嵌套

平时我们创建动画都使用的是transition标签,这个时候我们就需要分层了,但是有的时候CSS满足不了我们需要的动画必须要通过JS来解决,那只有利用钩子函数了。

(一)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)
}
  • 发表于 2020-09-19 11:42
  • 阅读 ( 10 )
  • 分类:前端开发

0 条评论

请先 登录 后评论
库库巴
库库巴

56 篇文章

作家榜 »

  1. 库库巴 56 文章
  2. 素质教育的漏网之鱼 39 文章
  3. 特效搬运工 31 文章
  4. 噢嚯 3 文章
  5. admin 1 文章
  6. 手机用户7182 0 文章
  7. Axizs 0 文章
  8. 哄哄 0 文章