vue动画

一、vue动画

1、使用transition定义动画

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

//使用vue中的transition动画组件

Hello world...


//创建vue的实例
new Vue({
el: ".box",
data: {
show: true
},
methods: {
toggle() {
this.show = !this.show
}
}
})

2、结合animate.css动画库定义transition动画

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





    <button @click="toggle">切换

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

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

3、监听vue动画的过渡事件

  • 使用transition定义动画


    <transition name="myblock" enter-active-class="animated bounceInRight"
    leave-active-class="animated bounceOutLeft"
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave">


    <button @click="toggle">切换

  • 创建vue实例

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

二、vue-router

1、为什么要使用vue-router?

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



    vue-router使用









2、如何使用vue-router

  • 公用style样式

01、vue-router路由传参

  • html结构


    vue-router使用







  • script结构



02、vue-router路由嵌套

  • html结构


    vue-router使用








  • script结构



03、vue-router路由跳转的监听

  • html结构


    vue-router使用








  • script结构



3、vue-cli

posted @ 2017-11-08 19:34  不完美的完美  阅读(1225)  评论(0)    收藏  举报