vue动画，心动起来让你一个人离不开你的最好的方式，就是抓住她的胃，留下用户鼠标的最好方式就是动画。相较于静态的页面，用

让你一个人离不开你的最好的方式，就是抓住她的胃，留下用户鼠标的最好方式就是动画。相较于静态的页面，用户难免看了无聊，审美疲劳，这时候，动画效果就能帮助你吸引用户的目光，提高用户交互的体验。今天就来介绍几种实现页面动态效果的方法......

一、动态添加类名，改变css样式

1、Opacity and transform

• 实现效果

• 核心代码

      <div class="card__content">
        <div :class="['emoji', {hidden: !isActive}]">💗</div>     
      </div>
      <div class="card__action">
        <button type="button" @click="isActive=!isActive;">请按这里</button>
      </div>

• 使用vue的v-bind:class(缩写为:class)，动态绑定hidden类名。
• 用[]绑定类名数组，emoji类名是基本样式类，{}来绑定一个对象，键是hidden类名，它的添加与否取决于!isActive布尔表达式的结果，true则添加，false移除。

.emoji {
  font-size: 80px;
  transition: 0.5s;
}

.hidden {
  opacity: 0;
  transform: translateX(30px);
}

• 过渡效果，让样式改变时更加平滑，当点击按钮时，添加hidden类名，将图标的透明度修改为零，并沿x轴平移30px，实现动画效果。

2、animation

• 实现效果

• 核心代码

      <div class="card__content">
        <div :class="['emoji', {pulse: !isActive}]">💗</div>     
      </div>
      <div class="card__action">
        <button type="button" @click="isActive=!isActive;">请按这里</button>
      </div>

Pulse类样式

.pulse{
    animation-name: pulse ;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
/*css 性能优化 GPU加速 动画不要影响周围的文档*/
@keyframes pulse{
    from{
        transform: scale3d(1,1,1);
    }
    50%{
        transform: scale3d(10,10,10);
    }
    to{
        transform: scale3d(1,1,1);
    }
}

• 更高级的css动画，使用关键帧实现动画效果。
  • animation-name:指定使用动画的名称
  • animation-duration:动画持续时间-
  • animation-iteration-count:动画无限循环播放
• 定义关键帧@keyframes pulse
  • from 关键帧：定义动画开始时的状态，图标保持原状态。
  • 50% 关键帧：定义动画进行到一半时的状态，图标尺寸放大 10 倍。
  • to 关键帧：定义动画结束时的状态，图标回到初始尺寸。

二、vue中内置transition组件

• 实现效果

• vue通过数据响应系统跟踪组件状态的变化，当数据发生改变时，会触发视图的更新。
• 并且当<transition>内的内容发生改变时，Vue会自动检测这种变化，并决定是否需要应用过渡效果。
• 定义默认类名(一些内置的、类似生命周期的钩子类名)：
  • v-enter：定义进入过渡的开始状态。
  • v-enter-active：定义进入过渡生效时的状态，可以在此类名中定义过渡动画。
  • v-enter-to：定义进入过渡的结束状态。
  • v-leave：定义离开过渡的开始状态。
  • v-leave-active：定义离开过渡生效时的状态。
  • v-leave-to：定义离开过渡的结束状态。
• 代码实现

<transition>
    <div v-if="isActive" class="emoji">💗</div>
</transition>

• 定义默认类名css

/* 进入时 */
.v-enter-from{
    opacity: 0;
}
.v-enter-active{
    transition: .3s;
}
.v-enter-to{
    opacity: 1;
}
/* 离开时 */
.v-leave-from{
    opacity: 1;
}
.v-leave-active{
    transition: 1s;
}
.v-leave-to{
    opacity: 0;
}

如果想要定制呢？

• 添加name属性，自动为过渡元素添加预定义，并且的自定义的CSS类名。
• 提供了一种简洁的方式来管理多个过渡类名，不需要手动编写大量类名。

使用自定义效果<transition>添加name="slide"

.slide-enter-from{
    opacity: 0;
    transform: translateX(30px);
}
.slide-enter-active{
    transition: .3s;

}
.slide-enter-to{
    opacity: 1;
}

.slide-leave-from{
    opacity: 1;
}
.slide-leave-active{
    transform: .3s;
}
.slide-leave-to{
    opacity: 0;
    transform: translateX(-100px);
}

• 实现效果

更多丰富的动画效果——animate

• 轻量级的CSS动画库，提供了许多的预定义动画类。
• 只需要定制enter-active-class 和 leave-active-class

• 安装完成后，在mian.js中import 'animate.css'导入css文件。
• 在官网找到喜欢的动画效果，直接复制类名。animate.style/?spm=5176.2…

        <transition
          name="slide"
          class="animate__tada"
          enter-active-class="animate__animated animate__tada"
          leave-active-class="animate__animated animate__bounce"
        >
          <div v-if="isActive" class="emoji">💗</div>
        </transition>

• 添加enter-active-class、leave-active-class类名，搭配你自己喜欢的动画效果。

这个动画可以留住你嘛......