Vue 过渡动画

66 阅读 0 评论 44 点赞

我是靠谱客的博主朴素小熊猫，最近开发中收集的这篇文章主要介绍Vue 过渡动画，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.在元素外层套上transition标签

<div class="head">
      <transition name="sun_move" appear>
        <img src="../assets/image/img_sun.png" />
      </transition>
</div>

2.css样式

<style>
/*元素出现时 进行的动画*/
.sun_move-enter-active {
  animation: move 3s linear;
}
/*元素隐藏时进行的动画*/
.sun_move-leave-active {
  animation: move 3s linear reserve;
}
@keyframes move {
  from {
    transform: translate(-350px, 50px);
  }
  to {
    transform: translateX(0px);
  }
}
</style>