vue动画

vue动画

使用过渡类名

<div id="app">
<input type="button" value="动起来" @click="myAnimate">
  <!-- 使用 transition 将需要过渡的元素包裹起来 -->
  <transition name="fade">
    <div v-show="isshow">动画哦</div>
  </transition>
</div>

　　

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
  isshow: false
},
methods: {
  myAnimate() {
    this.isshow = !this.isshow;
  }
}
});

　　

* 定义进入和离开时候的过渡状态 */
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.2s ease;
    position: absolute;
  }

  /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
    transform: translateX(100px);
  }

　　

第三方css动画库

导入

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

　　

定义transition 及属性

<transition
enter-active-class="fadeInRight"
  leave-active-class="fadeOutRight"
  :duration="{ enter: 500, leave: 800 }">
<div class="animated" v-show="isshow">动画哦</div>
</transition>

　　

定义 transition 组件以及三个钩子函数：

<div id="app">
  <input type="button" value="切换动画" @click="isshow = !isshow">
  <transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter">
    <div v-if="isshow" class="show">OK</div>
  </transition>
</div>

　　

三个钩子函数

methods: {
      beforeEnter(el) { // 动画进入之前的回调
        el.style.transform = 'translateX(500px)';
      },
      enter(el, done) { // 动画进入完成时候的回调
        el.offsetWidth;
        el.style.transform = 'translateX(0px)';
        done();
      },
      afterEnter(el) { // 动画进入完成之后的回调
        this.isshow = !this.isshow;
      }
}

　　

定义动画过渡时长和样式

.show{
transition: all 0.4s ease;
}

　　

v-for的列表过渡

定义过渡样式：

<style>
  .list-enter,
  .list-leave-to {
    opacity: 0;
    transform: translateY(10px);
  }

  .list-enter-active,
  .list-leave-active {
    transition: all 0.3s ease;
  }
</style>

　　

定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来：

<div id="app">
  <input type="text" v-model="txt" @keyup.enter="add">
  <transition-group tag="ul" name="list">
    <li v-for="(item, i) in list" :key="i">{{item}}</li>
  </transition-group>
</div>

　　

定义 VM中的结构：

  // 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
    el: '#app',
    data: {
      txt: '',
      list: [1, 2, 3, 4]
    },
    methods: {
      add() {
        this.list.push(this.txt);
        this.txt = '';
      }
    }
  });

　　

v-move 和 v-leave-active 结合使用，能够让列表的过渡更加平缓柔和：

.v-move{
transition: all 0.8s ease;
}
.v-leave-active{
position: absolute;
}