vue实现元素过渡效果

简单过渡效果实现

过渡效果有一个最基本的要求：元素必须有变化的过程，比如是显示/隐藏元素；删除/添加元素；元素移动，定位模式下设置偏移量等等。

/* 进场动画 */
.kerwin-enter-active {
  animation: aaa 1.5s;
}
/* 出场动画 */
.kerwin-leave-active {
  animation: aaa 1.5s reverse;
}
/* 定义动画的名字和开始到结束的样式 */
@keyframes aaa {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

<!-- kerwin-enter-active，kerwin-leave-active是自定义的样式 -->
<transition enter-active-class="kerwin-enter-active" leave-active-class="kerwin-leave-active">
  <div v-if="isShow">1111111111111111111</div>
</transition>
<button @click="isShow=!isShow">show/hide</button>

var vm = new Vue({
      el: "#box",
      data: {
        isShow: true
      }
    })

通过上述html，css，js代码就能实现一个最简单的元素过渡的效果。
如果进出场动画对应的样式定义为：kerwin-enter-active，kerwin-leave-active。那么页面除了上面那种写法外，还有种简单的写法

<transition name="kerwin" appear>
  <div v-if="isShow">2222222222222222222</div>
</transition>

多个元素过渡

在html代码中使用v-if v-else用来控制多个元素的过渡。mode表示进出动画的顺序

<transition enter-active-class="kerwin-enter-active" leave-active-class="kerwin-leave-active" mode="out-in">
   <!-- out -in
   in-out -->
   <div v-if="isShow" key="1">1111111111111111111</div>
   <div v-else key="2">222222222222222222</div>
</transition>

多个组件过渡

使用component标签实现动态组件效果。对每个动态组件包上一个transition，从而实现多个组件过渡

<keep-alive>
  <transition name="kerwin" mode="out-in">
    <component :is="which"></component>
  </transition>
</keep-alive>

<footer>
  <ul>
    <li @click=" which='home' ">
      首页
    </li>
    <li @click=" which='list' ">
      列表
    </li>
    <li @click=" which='shopcar' ">
      购物车  
    </li>
  </ul>
</footer>

Vue.component("home",{
  template:`
   <div>
     home
     <input type="text"/>
   </div>
  `
})

Vue.component("list",{
  template:`
   <div>
     list
   </div>
  `
})

Vue.component("shopcar",{
  template:`
   <div>
     shopcar
   </div>
  `
})

多个列表过渡

使用transition-group

<ul>
  <transition-group name="kerwin">
      <li v-for="(item,index) in datalist" :key="item">
          {{item}}--{{index}}
          <button @click="handleDelClick(index)">del</button>
      </li>
  </transition-group>
</ul>

var vm = new Vue({
     el:"#box",
     data:{
         mytext:"",
         datalist:["1111","222","3333"]
     },
     methods:{
         handleDelClick(index){
             this.datalist.splice(index,1)
         }
     }
 })