2020-08-31 Vue的過渡與動畫

transition

過渡狀態(tài)

使用transition組件（標(biāo)簽）包裹盈厘，需要切換的組件、元素

案例：
.ani1-enter{
  // 在這里定義初始狀態(tài)
  opacity:0;
  transtion:translateX(-400px) rotate(360deg);
}
.ani1-enter-active,.ani1-leave-active{
  transtion:all 1s;
}
.ani1-leave-to{
  // 在這里定義最后 的一個狀態(tài)
  opacity:0;
  transtion:translateY(400px) scale(0.1);
}

<transition name="ani1" mode="out-in">
  <div v-show="isShow">
  
  </div>
</transition>
{
  data:{
    isShow:false
  }
}

注意點:

1. transition 只能控制單個組件動畫
1. 使用 v-if v-else-if v-else 多個平行可以控制（單個元素同時只顯示一個）
1. mode 使用v-if v-else 控制多個元素動畫（單個動畫）
  out-in 先出去再進來(較為常見)
  in-out 先進來再出去

transition組件結(jié)合animation屬性

1. 下載animate.css動畫庫
1. 可以利用swiper里的動畫庫

案例：
<link rel="stylesheet" href="./css/animate.css">
  <style>
    .box {
      width: 100px;
      height: 100px;
      color: cadetblue;
      font-size: 30px;
      margin: 50px auto;
    }
    .dong-enter-active {
      animation: 2s rotateInDownLeft;
    }
    .dong-leave-active {
      animation: 2s rotateOutDownLeft;
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click='ischange = !ischange'>{{ ischange?'隱藏':'顯示' }}</button>
    <transition name='dong'>
      <div class="box" v-show="ischange">
        ANIMATE.LESS
      </div>
    </transition>
  </div>
</body>
<script src="./js/vue.js"></script>
<script>
  let vm = new Vue({
    el:'#app',
    data:{
      ischange:false
    }
  })
</script>

transition-group組件主要用于加載列表動畫

todolist的案例可以參考,拿transition-group組件包裹動態(tài)生成的列表項即可

//定義自定義過渡動畫
<style>
.ani-enter {
      opacity: 0;
      transform: translateX(-300px) rotate(360deg);
    }

    .ani-enter-active,
    .ani-leave-active {
      transition: all 1s;
    }

    .ani-leave-to {
      opacity: 0;
      transform: translateY(300px) scale(0.1);
    }
</style>

//將之前的動態(tài)生成的列表項放在transition-group標(biāo)簽中即可
<ul class="list-group">
        <h2>未完成事項</h2>
        <li class="list-group-item" v-show="!todoList.length">
          暫無待辦事項
        </li>
        <transition-group name='ani'>
          <li :class="['list-group-item','bg-danger']" :key="index" v-for="(cont,index) in todoList"
            v-if="cont.isCompleted===false">
            <span>{{ cont.cont }}</span>
            <button @click='addComplete(index)' class="btn btn-success btn-sm">完成</button>
            <button @click="del(index)" class="btn btn-danger btn-sm">刪除</button>
          </li>
        </transition-group>
      </ul>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

2020-08-31 Vue的過渡與動畫

transition

transition組件結(jié)合animation屬性

transition-group組件 主要用于加載列表動畫

transition-group組件主要用于加載列表動畫