Vue组件实例

Vue 动画效果过渡模式

1. 相同标签名的元素切换

<div id="demo">
 <transition>
   <button v-bind:key="isEditing" v-on:click="isEditing = !isEditing">
     {
  {isEditing ? 'save' : 'edit'}}
   </button>
 </transition>
</div>
<script>
new Vue({
 el:'#demo',
 data:{
    isEditing:true
 }
})
</script>

效果如下：

2. 多个元素的过渡,可重写为绑定了动态属性的单个元素过渡

<div id="demo2">
 <transition name="fade" mode="out-in">
  <button v-bind:key="docState" v-on:click="rever">
    {
  { buttonMessage }}
  </button>
 </transition> 
</div>  
<script>
new Vue({
 el:'#demo2',
 data:{
    docState:0
 },
 methods: {
   rever:function(){
      this.docState += 1;
      if(this.docState > 2){
         this.docState = 0
       }
    }
 },
 computed: {
   buttonMessage:function(){
      switch(this.docState) {
        case 0: return '按钮一';
        case 1: return '按钮二';
        case 2: return '按钮三';
       }
     }
    }
})
</script>
<style>
   .fade-enter-active,.fade-leave-active{
     transition:all 0.3s ease;
   } 
   .fade-leave-active{
     opacity:0;
     transform: translateX(10px);
   }

</style>

效果如下：

3. 多个组件的过渡，也可以使用动态组件，不需要使用 key 特性。

 <div id = "demo">
          <input type="radio" value="A" id="a" name="boy" v-model="view">
          <label for="a">A</label>
          <input type="radio" value="B" id="b" name="boy" v-model="view">
          <label for="a">B</label>
          <p>选择结果：{
  {view}}</p> 
          <transition name="fade" mode="out-in">
              <component v-bind:is="view"></component>
          </transition>
 </div> 
<script>
          new Vue({
            el:'#demo',
            data:{
              view:'A'
            },
            components:{
              'A':{
                template:'<div>模块 A</div>