vuew 2.0动画

动画(过渡)

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

---

1. 单组件/元素过渡

• 过渡的类名

会有 4 个(CSS)类名在 enter/leave 的过渡中切换

1. v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
2. v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
3. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
4. v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。

image

.box {
    width: 300px;
    height: 300px;
    background: red;
}

.fade-enter-active,
.fade-leave-active {
    transition: all 2s ease;
}

.fade-enter-active  { /*变化成什么样, 显示的过程 */
    width: 300px;
    height: 300px;
    opacity: 1;
}

.fade-enter {  /* 显示前的状态 */
    width: 100px;
    height: 100px;
    opacity: 0;
}

.fade-leave { /* 消失前的状态 */
    width: 300px;
    height: 300px;
    opacity: 1; 
}

.fade-leave-active { /*变化成什么样, 消失的过程 */
    width: 100px;
    height: 100px;
    opacity: 0; 
}


        点击显示隐藏
        
            

        


new Vue({
    el: '#app',
    data: {
        show: false
    },
    methods: {
        toggle: function() {
            this.show = !this.show;
        }
    }
});

• 自定义过渡类名

我们可以通过以下特性来自定义过渡类名：

• enter-class
• enter-active-class
• leave-class
• leave-active-class

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用

  
    Toggle render
  
  
    
hello
  


new Vue({
  el: '#example-3',
  data: {
    show: true
  }
})

• 回调事件

  



methods: {
  // --------
  // 进入中
  // --------
  beforeEnter: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },
  // --------
  // 离开时
  // --------
  beforeLeave: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

当只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。 否则，它们会被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

• 过渡模式
  • in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
  • out-in: 当前元素先进行过渡，完成之后新元素过渡进入。

2. 列表过渡

渲染整个列表，比如使用 v-for ？在这种场景中，使用 组件

1. 不同于 ， 它会以一个真实元素呈现：默认为一个 。你也可以通过 tag 特性更换为其他元素。
2. 内部元素 总是需要 提供唯一的 key 属性值

• 列表的进入和离开过渡
  与单个组件/元素一样