『前端学习笔记』 Vue.js 过渡&动画

参考视频：学 Vue.js 看这个就够了

官方文档：Vue.js

单元素过渡：transition

过渡类名

• 示例

<style type="text/css">
  /*状态1、4*/
  .v-enter,
  .v-leave-to{
    opacity: 0; /*透明度：0*/
    transform: translateX(80px); /*位移*/
  }

  /*两个时间段*/
  .v-enter-active,
  .v-leave-active{
    transition: all 0.8s ease-in-out; /*元素 时间 形式*/
  }
</style>

<div class="myapp">
  <!--点击按钮：切换h1标题是否渲染-->
  <button @click="flag=!flag">按钮</button>
  <!--使用Vue提供的transition元素包裹动画区域-->
  <transition>
    <!--渲染：受flag控制-->
    <h1 v-show="flag">标题</h1>
  </transition>
</div>

<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el:'.myapp',
    data:{
      flag: !true
    }
  });
</script>

自定义名称

<style type="text/css">
  /*状态1、4*/
  .my-enter,
  .my-leave-to{
    opacity: 0; /*透明度：0*/
    transform: translateX(80px); /*位移*/
  }

  /*两个时间段*/
  .my-enter-active,
  .my-leave-active{
    transition: all 0.8s ease-in-out; /*元素 时间 形式*/
  }
</style>

<div class="myapp">
  <!--点击按钮：切换h1标题是否渲染-->
  <button @click="flag=!flag">按钮</button>
  <!--使用Vue提供的transition元素包裹动画区域-->
  <transition name="my"> <!--定义名称-->
    <!--渲染：受flag控制-->
    <h1 v-show="flag">标题</h1>
  </transition>
</div>

<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el:'.myapp',
    data:{
      flag: !true
    }
  });
</script>

第三方类库animate.css

参考文档：Animate.css

• 演示

<link rel="stylesheet" href="css/animate.css">

<div class="myapp">
  <button @click="flag=!flag">按钮</button>
  <transition
    enter-active-class="animate__bounceIn"
    leave-active-class="animate__bounceOut"
    :duration="{enter:200, leave:400}"> <!--:duration="400" 统一设置-->
    <h1 v-show="flag">标题</h1>
  </transition>
</div>

<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el:'.myapp',
    data:{
      flag: !true
    }
  });
</script>

• Vue的transition标签用法

1. 进入类：enter-active-class
2. 离开类：leave-active-class
3. 持续时间：:duration

• Animate.css用法
  所需要的类名参考文档
  
  

• Animate.css用法改变

1. 原：“animated classname”
2. 新：“animate__classname”
   
   
   

Javascript钩子函数

案例：小球半场动画

<style type="text/css">
  .ball{ /*CSS定义圆角小球*/
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #28a4c9;
  }
</style>

<div class="myapp">
  <button @click="flag=!flag">加入购物车</button>
  <transition
    @before-enter="myBeforeEnter"
    @enter="myEnter"
    @after-enter="myAfterEnter">
    <div v-show="flag" class="ball"></div>
  </transition>
</div>

<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el:'.myapp',
    data:{
      flag:!true
    },
    methods:{
      myBeforeEnter(el){
        el.style.transform = "translate(0, 0)"; //起始位置 //每次点击都会调用
      },
      myEnter(el, done){
        el.offsetWidth; //写了一个offset相关才有效果，强制动画刷新
        el.style.transform = "translate(150px, 450px)"; //结束位置
        el.style.transition = "all 1s ease"; //动画形式
        done(); //done是下面函数的引用
      },
      myAfterEnter(el){
        this.flag = !this.flag; //方法1：渲染消失(有时间停顿，需要在上面参数调用done())
        //el.style.display = "none"; //方法2：css消失
      }
    }
  });
</script>

列表过渡：transition-group

属性：appear、tag

• appear：入场效果

  <transition-group appear>
      <li v-for="item in list"
          :key="item"
          v-text="item">
      </li>
  </transition-group>

• tag：规定渲染元素，否则为默认span

<div class="myapp">
  <transition-group appear tag="ul">
    <li v-for="item in list"
        :key="item"
        v-text="item">
    </li>
  </transition-group>
</div>

1. 代码结果：不加tag

2. 代码结果：加tag并设置值为ul
   

## 案例：列表添加

<style type="text/css">
  .v-enter,
  .v-leave-to{ /*初始*/
    opacity: 0;
    transform: translateY(80px);
  }
  .v-enter-active,
  .v-leave-active{ /*过程*/
    transition: all 0.6s ease;
  }
  li:hover{ /*鼠标悬停过渡*/
    background-color: red;
    transition: all 0.8s ease; 
  }
</style>

<div class="myapp">
  <input type="text" v-model="mytext">
  <button @click="add">添加</button>
  <ul>
  <!--使用Vue提供的transition-group元素包裹动画区域-->
  <transition-group>
     <li v-for="item in list" 
         :key="item"
         v-text="item">
     </li>
  </transition-group>
  </ul>
</div>

<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el:'.myapp',
    data:{
      list: [1, 2, 3],
      mytext: null
    },
    methods:{
      add(){
        this.list.push(this.mytext);
        this.mytext = null;
      },
      remove(){}
    }
  });
</script>

案例：列表删除

<style type="text/css">
  .v-enter,
  .v-leave-to{
    opacity: 0;
    transform: translateY(80px);
  }
  .v-enter-active,
  .v-leave-active{
    transition: all 0.6s ease;
  }
  li{
    width: 100%;
  }
  li:hover{
    background-color: red;
    transition: all 0.8s ease; //鼠标悬停过渡
  }
    .v-move{ /*元素位移时的操作*/
    transition: all 0.6s ease;
  }
  .v-leave-active{
    position: absolute;
  }
</style>

<div class="myapp">
  <ul>
  <!--使用Vue提供的transition-group元素包裹动画区域-->
    <transition-group>
      <!--点击移除-->
      <li v-for="(item, index) in list"
          :key="item"
          v-text="item"
          @click="del(index)">
      </li>
  </transition-group>
  </ul>
</div>

<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el:'.myapp',
    data:{
      list: [1, 2, 3],
      mytext: null
    },
    methods:{
      del(index){
        this.list.splice(index, 1);
      }
    }
  });
</script>