vue-animation

vue-animation

• 为什么要有动画 ？
  • 就是要有不解释
  • 比较简单记录一下，方便找

1. 过渡类名动画

1. html结构

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

2. VM 实例：

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

3. 定义两组类样式：

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

    .v-enter-active,
    .v-leave-active {
   
      transition: