动画使用 & animate.css库 & velocity.js & 动画钩子函数
文章目录
1、transition运用:显隐
<style type="text/css">
.round {
width: 200px;
height: 200px;
border-radius: 50%;
background: red;
}
.circle-enter, .circle-leave-to {
width: 0;
height: 0;
opacity: 0;
}
.circle-enter-active, .circle-leave-active {
transition: all 2s;
}
</style>
</head>
<body>
<div id="app">
<button @click="toggle">toggle</button>
<transition name="circle">
<div class="round" v-show="isShow"></div>
</transition>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
isShow: true
},
methods: {
toggle: function(){
this.isShow = !this.isShow;
}
.........
2、运用css3动画效果
/*定义一个css3的动画*/
@keyframes donghua {
0% {
transform: scale(.5);
},
50% {
transform: scale(1.5);
},
100% {
transform: scale(1);
}
}
.demo {
font-weight: bold;
color: red;
font-size: 100px;
}
.circle-enter-active {
transform: left center;
animation: donghua 3s;
}
.circle-leave-active {
transform: left center;
animation: donghua 3s reverse;
}
</style>
</head>
<body>
<div id="app">
<button @click="toggle">toggle</button>
<transition name="circle">
<div class="demo" v-show="isShow">hello world</div>
</transition>
</div>
可以自定义添加类名:enter-active-class=“enter” leave-active-class=“leave”,其他不改变
.demo {
font-weight: bold;
color: red;
font-size: 100px;
}
.enter {
transform: left center;
animation: donghua 3s;
}
.leave {
transform: left center;
animation: donghua 3s reverse;
}
</style>
</head>
<body>
<div id="app">
<button @click="toggle">toggle</button>
<transition name="circle" enter-active-class="enter" leave-active-class="leave">
<div class="demo" v-show="isShow">hello world</div>
</transition>
</div>
3、运用animate.css
引入animate.css库，选择里面的动画效果，类名添加方式例如：“animated shake”
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
<div id="app">
<button @click="toggle">toggle</button>
<transition
name="circle"
enter-active-class="animated shake"
leave-active-class="animated swing"
>
<div class="demo" v-show="isShow">hello world</div>
</transition>
</div>
问题：页面刷新的时候，没有动画显示
解决：添加appear、appear-active-class属性
<transition
name="circle"
appear
enter-active-class="animated shake"
leave-active-class="animated swing"
appear-active-class="animated shake"
>
<div class="demo" v-show="isShow">hello world</div>
</transition>
4、animate.css动画和自己设置的动画一起使用
<link rel="stylesheet" type="text/css" href="animate.css">
<style type="text/css">
.circle-enter, .circle-leave-to {
opacity: 0
}
.circle-enter-active, .circle-leave-active {
transition: opacity 10s;
}
.demo {
font-size: 100px;
color: red;
}
</style>
</head>
<body>
<div id="app">
<button @click="toggle">toggle</button>
<transition
name="circle"
appear
enter-active-class="animated shake circle-enter-active"
leave-active-class="animated swing circle-leave-active"
appear-active-class="animated jello"
>
<div class="demo" v-show="isShow">hello world</div>
</transition>
问题：animate.css设置的动画默认为1s，自己设置的为10s，若以自己设置的为主，需要给transition上添加属性type=“transition”,也可以自定义duration进行设置
<div id="app">
<button @click="toggle">toggle</button>
<transition
type="transition"//以transition上设置的时间为主
:duration="3000"
//进行更为负责的入场、出场时间的设置
:duration="{enter: 5000, leave: 2000}"
name="circle"
appear
enter-active-class="animated shake circle-enter-active"
leave-active-class="animated swing circle-leave-active"
appear-active-class="animated jello"//可为页面进入或刷新时添加动画
>
<div class="demo" v-show="isShow">hello world</div>
</transition>
</div>
5、动画钩子函数和velocity.js
<div id="app">
<button @click="toggle">toggle</button>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<div class="demo" v-show="isShow">hello world</div>
</transition>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="velocity.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
isShow: true
},
methods: {
toggle: function(){
this.isShow = !this.isShow;
},
beforeEnter: function(el) {
el.style.opacity=0;
},
enter: function(el, done) {
Velocity(el, {opacity: 1}, {duration: 2000, complete: done})
//2s后complete：done意思是动画结束，进入下一个函数
},
afterEnter: function(el) {
console.log("动画结束")
}