vue动画效果

JavaScript 2019-10-21 779

导读:
1.css动画原理
2.使用animated.css库
3.放大缩小动画效果
4.同时使用过渡与动画效果
5.js动画与velocity.js
6.列表过渡
7.多个元素或组件的过渡
8.动画封装

1.css动画原理

当transition没有指定name时默认为v-enter。

<style>  
        /*显示enter*/  
        .fade-enter {  
            opacity: 0;  
        }  
        .fade-enter-active{  
            transition: opacity 3s;  
        }  
        /*隐藏*/  
        .fade-leave-to{  
            opacity: 0;  
        }  
        .fade-leave-active{  
            transition: opacity 3s;  
        }  
</style>  
<body>  
    <div id="app">  
<!--        // 动画运行第一帧,为div添加fade-enter,fade-enter-active。-->  
<!--        //第二帧,删除fade-enter,添加fade-enter-to-->  
<!--        // 第三帧时,删除fade-enter-to和fade-enter-active-->  
        <transition name="fade">  
            <div v-if="show">{{message}}</div>  
        </transition>  
        <button @click="handleClick">切换</button>  
    </div>  
</body>  
<script>  
    var app = new Vue({  
        el: '#app',  
        data: {  
            message: 'Hello Vue',  
            show: true  
        },  
        methods: {  
            handleClick: function () {  
                this.show = ! this.show;  
            }  
        }  
    })  
</script>  

2.使用animated.css库
引入animated库
<link rel="stylesheet" href="animate.css" type="text/css">
在使用animated之前,可以自己编写keyframes来实现动画效果,animated库也是使用这种方式,封装了各种动画效果,比较方便。

<style>  
        /*@keyframes bounce-in {*/  
        /*    0% {*/  
        /*        transform: scale(0);*/  
        /*    }*/  
        /*    50%{*/  
        /*        transform: scale(1.5);*/  
        /*    }*/  
        /*    100%{*/  
        /*        transform: scale(1);*/  
        /*    }*/  
        /*}*/  
        /*!*放大缩小的动画效果*!*/  
        /*.fade-enter, .fade-leave-to{*/  
        /*    transform-origin: left center;*/  
        /*    animation: bounce-in 1s;*/  
        /*}*/  
        /*.fade-enter-active, .fade-leave-active{*/  
        /*    transform-origin: left center;*/  
        /*    animation: bounce-in 1s reverse;*/  
        /*}*/  
</style>  
<body>  
    <div id="app">  
        使用animated.css库时必须使用自定义名字,并且必须有animated  
        <transition name="fade" enter-active-class="animated swing"  
        leave-active-class="animated shake">  
            <div v-if="show">{{message}}</div>  
        </transition>  
        <button @click="handleClick">切换</button>  
    </div>  
</body>  
<script>  
    var app = new Vue({  
        el: '#app',  
        data: {  
            message: 'Hello Vue',  
            show: true  
        },  
        methods: {  
            handleClick: function () {  
                this.show = ! this.show;  
            }  
        }  
    })  
</script>  

3.放大缩小动画效果

<style>  
        /*放大缩小*/  
        @keyframes bounce-in {  
            0% {  
                transform: scale(0);  
            }  
            50% {  
                transform: scale(1.5);  
            }  
            100% {  
                transform: scale(1);  
            }  
        }  
        .fade-enter-activa{  
            transform-origin: left center;  
            animation: bounce-in 1s;  
        }  
        .fade-leave-active{  
            transform-origin: left center;  
            animation: bounce-in 1s reverse;  
        }  
    </style>  
</head>  
<body>  
    <div id="app">  
        自定义class, enter-active-class, leave-active-class  
        <transition name="fade">  
            <div v-if="show">{{message}}</div>  
        </transition>  
        <button @click="handleClick">切换</button>  
    </div>  
</body>  
<script>  

标签:JavaScript

文章评论

评论列表

已有0条评论