2.（过渡） 以上是基础用法，下面把css样式换一下让过渡更炫酷

这里说一下transition: property duration timing-function delay ; 一共有四个参数可选；

这是一个从右侧滑出滑入同时淡入淡出的效果

.fade-enter-active {
  transition: all .3s ease;
.fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
/*cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。
数字越大越快
1.控制末尾快慢（更平缓）
2.控制开头快慢（更急）
3.控制结尾快慢（更急）
4.控制开头快慢（更平缓）*/
.fade-enter, .fade-leave-to{
  transform: translateX(10px);
  opacity: 0;
3.（动画）这里也是只改css动画样式
先说下animation的参数作用
值
说明
1.animation-name
指定要绑定到选择器的关键帧的名称
2.animation-duration
动画指定需要多少秒或毫秒完成
3.animation-timing-function
设置动画将如何完成一个周期
4.animation-delay
设置动画延迟间隔。
5.animation-iteration-count
定义动画的播放次数。
6.animation-direction
指定是否应该轮流反向播放动画。 reverse（反向播放）
7.animation-fill-mode
规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
8.animation-play-state
指定动画是否正在运行或已暂停。
这是一个放大再还原的回弹动画 
.fade-enter-active {
  animation: bounce-in .5s;
.fade-leave-active {
  animation: bounce-in .5s reverse;//reverse反向播放
@keyframes bounce-in {
    transform: scale(0);/*初始0看不到*/
  50% {
    transform: scale(1.5);/*放大*/
  100% {
    transform: scale(1);/*还原*/
二、自定义过渡的类名
有以下几个，作用跟上面对应的差不多，就是优先级高于普通的类名，主要结合Vue 的过渡系统和其他第三方 CSS 动画库
enter-class
enter-active-class
enter-to-class 
leave-class
leave-active-class
leave-to-class
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
//引用的第三方 CSS 动画库Animate.css
<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"  //进来时上下晃动
    leave-active-class="animated bounceOutRight"  //离开时划走，都是第三方库定义好的动画
    <p v-if="show">hello</p>
  </transition>
</div>
三、定义过渡持续时间 
<transition :duration="1000">...</transition>  //过渡几毫秒
//可以定制进入和移出的持续时间：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
最后也可以在 attribute（属性中） 中声明 JavaScript 钩子，具体点击查看文档
以上就是动画的基本用法，日常运用vue动画是没问题的，下面就是进阶的，有兴趣的同学可以继续关注哦，我会持续更新！！
 
 
  
 
 

    前端老实人
        公众号 | 前端老实人
      
 
粉丝
 
 
 
   
    
友情链接：