vue系列之过渡

2016-12-28

摘要：vue实现简单的过渡效果

过渡效果

Vue在插入、更新或者移除DOM时可以应用过渡，简单的使用transition封装组件结合v-if和v-show达到效果
会有4个(CSS)类名在enter/leave的过渡中切换，
v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在transition/animation完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在transition/animation 完成之后移除。
其中的v由<transition name="fade">中的name属性设置（设置为fade）
blog9

过渡示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue过渡</title>
  <style>
    p {
      width:300px;
      height:300px;
      background: red;
    }
    .fade-enter-active, .fade-leave-active {
        transition: all 1s ease 0.5s;
    }

    .fade-enter-active {
      opacity:1;
      width:300px;
      height:300px;
    }
    .fade-leave-active {
      opacity:0;
      width:100px;
      height:100px;
    }

    .fade-enter, .fade-leave {
      opacity:0;
      width:100px;
      height:100px;
    }
  </style>
</head>
<body>
  <div id="box">
    <input type="button" value="点我显示/隐藏" @click="show=!show">
    <transition name="fade">
      <p v-show="show"></p>
    </transition>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el:'#box',
      data:{
        show:false
      }
    });
  </script>
</body>
</html>