在vue中使用animate库

最新推荐文章于 2024-05-12 18:25:03 发布

weixin_30580341

最新推荐文章于 2024-05-12 18:25:03 发布

阅读量110

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wzndkj/p/9684512.html

本文介绍如何在Vue中自定义动画效果，通过修改默认的class名称实现动画的自定义，并展示了如何集成animate.css库，以简化复杂动画效果的实现。

<style>
　　@keyframes bounce-in {
　　　　0% {
　　　　　　transform: scale(0);
　　　　}
　　　　50% {
　　　　　　transform: scale(1.5)
　　　　}
　　　　100% {
　　　　　　transform: scale(1);
　　　　}
　　}
　　.fade-enter-active{
　　　　transform-origin: left center;
　　　　animation: bounce-in 1s;
　　}
　　.fade-leave-active{
　　　　transform-origin: left center;
　　　　animation: bounce-in 1s reverse;
　　}
</style>
<div id='app'>
　　<transition name='fade'>
　　　　<div v-if='show'>hello world</div>
　　</transition>
　　<button @click='handleClick'>切换</button>
</div>

<script>
var vm = new Vue({
　　el:'#app',
　　data:{
　　　　show:true
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.show = !this.show;
　　　　}
　　}
})
</script>

这是个放大的动画效果，在vue里面能不能不用fade-leave-active，fade-enter-active这样的规定好的class，我要用自定义的可不可以，可以

<style>
　　.active{
　　　　transform-origin: left center;
　　　　animation: bounce-in 1s;
　　}
　　.leave{
　　　　transform-origin: left center;
　　　　animation: bounce-in 1s reverse;
　　}
</style>

<transition
　　name='fade'
　　enter-active-class='active'
　　leave-active-class='leave'
>
　　<div v-if='show'>hello world</div>
</transition>

在transition里面起自己的别名

既然可以自定义自己的class，就可以使用我们的animate.css库，animate.css库是

https://daneden.github.io/animate.css/

这个库提供了很多动画效果，我们如果要使用这个动画效果，可以下载下来

<script src="../vue.js"></script>
<link rel='stylesheet' type='text/css' href="../animate.css">
<div id='app'>
　　<transition
　　　　name='fade'
　  　　enter-active-class='animated swing'
　　　　leave-active-class='animated shake'
　　>
　　　　<div v-if='show'>hello world</div>
　　</transition>
　　<button @click='handleClick'>切换</button>
</div>

<script>
var vm = new Vue({
　　el:'#app',
　　data:{
　　　　show:true
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.show = !this.show;
　　　　}
　　}
})
</script>