<h1 id="一vue动画">一、vue动画
<h3 id="使用transition定义动画">1、使用transition定义动画

//定义过渡的样式
/*动画刚开始时的状态，动画结束时的状态*/
.move-enter-active,.move-leave-active{
    transition:all 2s;
}
/*动画过渡的css样式*/
.move-enter,.move-leave-to{
    opacity:0;
    transform:translateX(150px);
}
//使用vue中的transition动画组件

<transition name="move">

<h2 v-if="show" class="title">Hello world...

//创建vue的实例

new Vue({

el: ".box",data: {

show: true

},methods: {

toggle() {

this.show = !this.show

}

}

})

• 使用transition组件，并且定义动画进入（enter-active）时的类名和动画离开（leave-active）时的类名

• 创建vue实例改变元素的显示与隐藏从而触发动画效果

    new Vue({
        el: ".box",data: {
             show: true
        },methods: {
             toggle() {
                  this.show = !this.show
             }
       }              
    })

• 使用transition定义动画

    
  
                @enter="enter"                  
                @after-enter="afterEnter"       
                @before-leave="beforeLeave"     
                @leave="leave"                  
                @after-leave="afterLeave">      
                
     
         
         
    

• 创建vue实例

    new Vue({
        el: ".box",methods: {
            toggle() {
                this.show = !this.show
            },beforeEnter() {
                 alert("开始动画之前.....")
            },enter() {
                 alert("动画开始......")
            },afterEnter() {
                 alert("动画结束......")
            },beforeLeave(){
                 alert("离开之前")
            },leave(){
                 alert("即将要离开....")
            },afterLeave(){
                 alert("离开已经结束")
            }
        }
     })

• 实现SPA(single page application 减少客户端和服务器之间请求加载时间)

    
        
  vue-router使用
            
            
            
             
        
    <script src="./js/vue.js"&gt;</script>
    <script src="./js/vue-router.js"&gt;</script>
    <script>
        // 定义不同的路由切换时需要显示的内容
  
        // var Hot={template:"<h1>这是热门话题部分</h1>"}
        // var Tech={template:"<h1>这是科技动态部分</h1>"}
        // var Dev={template:"<h1>这是开发者资讯部分</h1>"}
  
        var Index=Vue.component("Index",{
            template:"<h1>这是主页部分</h1>"
        })
        var Hot=Vue.component("Hot",{
            template:"<h1>这是热门话题部分</h1>"
        })
        var Tech=Vue.component("Tech",{
            template:"<h1>这是科技动态部分</h1>"
        })
        var Dev=Vue.component("Dev",{
            template:"<h1>这是开发者资讯部分</h1>"
        })
  
        //配置路由规则
        var routes=[{
            path:"/",component:Index
        },{
            path:"/hot",component:Hot
        },{
            path:"/tech",component:Tech
        },{
            path:"/dev",component:Dev
        }]
  
        //创建vue-router的实例
        var router = new VueRouter({
            routes:routes
        })
  
        //最后将vue-router的实例挂载到vue的实例
        new Vue({
            el:".box",router:router
  
        })
    </script>
  

• 公用style样式

• html结构

• script结构

• html结构

• script结构

• html结构

• script结构

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!