美文网首页
vue transition动画组件再次回顾

vue transition动画组件再次回顾

作者: 阳光之城alt | 来源:发表于2018-08-22 17:12 被阅读0次
image.png

点击查看动画基础的链接

    &.fde-enter-active,&.fde-leave-active{
        opacity: 1;
         transition: all .3s linear;
     }
    &.fde-enter,&.fde-leave-to{
        opacity: 0;
        transition: all .3s linear;
    }

v2.5.16 列表过渡

 <transition-group tag="" name="xiao">
       <div 
          v-for="(item,index) in list" :key="item.id">{{item.id}}{{item.title}}>       
       </div>
    </transition-group>
    <button @click="btn">add</button>
第一步:安装:
npm install animate.css --save

第二步:引入及使用:
main.js中:
`import animated from` `'animate.css'` `// npm install animate.css --save安装,在引入`
`Vue.use(animated)`

第三步vue模板中:
`<div class=``"ty"``>`
`<!-- 直接使用animated中的动画class名,注意:必须使用animated这个class名,否则动画会无效 -->`
`<div class=``"box animated bounceInDown"``></div>`
`</div>`
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
      <div id="clk" >
        <!--01-->
                    <!--<transition  
                            name="fade" 
                            enter-active-class="active" 
                            leave-active-class="leave"
                            >
                      <div class="cp" v-show="show">
                         看动画路由的展示
                      </div>
                    </transition>-->
                    <!--02 使用animation库 type="transition"-->
                    <transition  
                            name="fade" 
                            
                            :duration="{enter:5000,leave:10000}"
                            appear
                            enter-active-class="animated bounceInDown fade-enter-active" 
                            leave-active-class="animated shake fade-leave-active"
                            appear-active-class="animated swing"
                    >
                      <div class="cp" v-show="show">
                        动画与路由同时使用
                      </div>
                    </transition>
                    
      </div>
     
      <div id="btn" @click="py($event)">
        点击动画变化
      </div>
      
  </div>
</template>

<script>
export default {
  name: 'dhua',
  data () {
    return {
      msg: '动画与路由同时使用',
      show:true
    }
  },
   methods:{
    py(even){
        this.show=!this.show
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less"  scoped>
/*cp fade-enter-active fade-enter-to
cp fade-leave-active fade-leave-to*/
/*1.1进入动画的几种状态*/
.fade-enter {
  opacity:0;
}
.fade-leave-to{
  opacity:1;
}
.fade-enter-active{
  transition:opacity 5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity 5s;
}
/*cp fade-enter-active fade-enter-to
cp fade-leave-active fade-leave-to*/

/*1.2 transform 如何与@keyframes结合*/
 /*@keyframes  bu{
  0%{
    transform: scale(0);
  } 
 50%{
    transform: scale(1.5);
  } 
  100%{
    transform: scale(1);
  } 
 }*/

/*1.3 transform 如何自定义动画名称 
 *           add==> enter-active-class="active" 
                         leave-active-class="leave" */

  #clk{
     width: 400px;
     height: 200px;
     border: 1px solid sandybrown;
     margin: 0  auto;
     .cp{
        margin-top: 20px;
        border: 1px solid darkgray;
        width: 150px;
        height: 30px;
        line-height: 30px;
        text-align: center;
      /*&.fade-enter,&.fade-leave-to{
                  opacity:0;
                }
            &.fade-enter-active,&.fade-leave-active{
                  transition:opacity 5s;
                }*/
                
                /*@keyframes  bu{
  0%{
    transform: scale(0);
  } 
 50%{
    transform: scale(1.5);
  } 
  100%{
    transform: scale(1);
  } 
 }*/
                /*css3动画的运用*/
                /*&.fade-enter-active{
                    transform-origin:left center; 
                    animation: bu 3s ;
                }
                &.fade-leave-active{
                    transform-origin:left center; 
                    animation: bu 3s reverse;
                }*/
                
                
                /*1.3 transform 如何自定义动画名称*/
                /*&.active{
                    transform-origin:left center; 
                    animation: bu 3s ;
                }
                &.leave{
                    transform-origin:left center; 
                    animation: bu 3s reverse;
                }*/
                
                /*1.4 animation如何与项目结合      appear-active-class="animated swing"  添加appear
                 *      type="transition"  规定以哪个时间为标准
                 *    自定义动画结束时长 :duration="10000"
                 *    :duration="{enter:5000,leave:10000}"
                 *    */
                
     }
     
    
  }
  #btn{
      margin: 20px auto ; 
        border: 1px solid darkgray;
        width: 140px;
        height: 30px;
        line-height: 30px;
        text-align: center;
  }
</style>

多路由多组件的过渡

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
      <div id="clk" >

            <!--02 多个路由或元素组件的过渡-->
                    <!--<transition name="fade" mode="out-in"  >
                           <div v-if="show" key="1">hello world</div>
                           <div v-else key="2">bye world</div>
                    </transition>-->
                    
                    <!--03 多个组件动态显示-->
                    <transition name="fade" mode="out-in"  >
                         <component :is="type">
                           <!--<child v-if="show"></child>
                           <child-one v-else></child-one>-->
                         </component>
                    </transition>
                    
      </div>
     
      <div id="btn" @click="py($event)">
        点击动画变化
      </div>
      
  </div>
</template>

<script>
    import Vue from 'vue'
    Vue.component('child',{
        template:'<div>child</div>'
    })
    Vue.component('child-one',{
        template:'<div>child-one</div>'
    })
    
    
export default {
  name: 'du',
  data () {
    return {
      msg: '多个路由或元素组件的过渡',
//    show:true
      type:'child'
    }
  },
   methods:{
    py(even){
//      this.show=!this.show
//    03
    this.type=this.type==='child'?'child-one':'child'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less"  scoped>
/*cp fade-enter-active fade-enter-to
cp fade-leave-active fade-leave-to*/
/*1.1进入动画的几种状态*/
.fade-enter {
  opacity:0;
}
.fade-leave-to{
  opacity:1;
}
.fade-enter-active{
  transition:opacity 5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity 5s;
}
/*cp fade-enter-active fade-enter-to
cp fade-leave-active fade-leave-to*/

/*1.2 transform 如何与@keyframes结合*/
 /*@keyframes  bu{
  0%{
    transform: scale(0);
  } 
 50%{
    transform: scale(1.5);
  } 
  100%{
    transform: scale(1);
  } 
 }*/

/*1.3 transform 如何自定义动画名称 
 *           add==> enter-active-class="active" 
                         leave-active-class="leave" */

  #clk{
     width: 400px;
     height: 200px;
     border: 1px solid sandybrown;
     margin: 0  auto;
     .cp{
        margin-top: 20px;
        border: 1px solid darkgray;
        width: 150px;
        height: 30px;
        line-height: 30px;
        text-align: center;
      /*&.fade-enter,&.fade-leave-to{
                  opacity:0;
                }
            &.fade-enter-active,&.fade-leave-active{
                  transition:opacity 5s;
                }*/
                
                /*@keyframes  bu{
  0%{
    transform: scale(0);
  } 
 50%{
    transform: scale(1.5);
  } 
  100%{
    transform: scale(1);
  } 
 }*/
                /*css3动画的运用*/
                /*&.fade-enter-active{
                    transform-origin:left center; 
                    animation: bu 3s ;
                }
                &.fade-leave-active{
                    transform-origin:left center; 
                    animation: bu 3s reverse;
                }*/
                
                
                /*1.3 transform 如何自定义动画名称*/
                /*&.active{
                    transform-origin:left center; 
                    animation: bu 3s ;
                }
                &.leave{
                    transform-origin:left center; 
                    animation: bu 3s reverse;
                }*/
                
                /*1.4 animation如何与项目结合      appear-active-class="animated swing"  添加appear
                 *      type="transition"  规定以哪个时间为标准
                 *    自定义动画结束时长 :duration="10000"
                 *    :duration="{enter:5000,leave:10000}"
                 *    */
                
     }
     
    
  }
  #btn{
      margin: 20px auto ; 
        border: 1px solid darkgray;
        width: 140px;
        height: 30px;
        line-height: 30px;
        text-align: center;
  }

</style>


vue中appear的用法
https://www.jb51.net/article/121427.htm

相关文章

网友评论

      本文标题:vue transition动画组件再次回顾

      本文链接:https://www.haomeiwen.com/subject/phmyiftx.html