1 vue动画
- 基本解释：
- vue不直接创造动画，动态提供vue需要的类名
- 当显示或者隐藏时vue 才会动态提供类名
- 需要用到内置组件
- 用到的类
- v-enter-active 进入的过程
- v-enter 进入前
- v-enter-to 进入到
- v-leave-active 离开的过程
- v-leave 离开前
- v-leave-to 离开到
- v 为transition的name属性值
1.1动画案例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
/* 进入过程*/
.fade-enter-active {
transition: all ease 2s;
}
.fade-enter {
opacity: 0;
transform: rotate(-180deg);
}
.fadr-enter-to {
opacity: 1;
transform: rotate(0deg);
}
/* 离开过程 */
.fade-leave-active {
transition: all ease 2s;
}
.fade-leave {
opacity: 1;
transform: rotate(0deg);
}
.fade-leave-to {
opacity: 0;
transform: rotate(180deg);
}
</style>
</head>
<body>
<div id="app">
<h1>动画</h1>
<button type="button" @click="flage=!flage">切换</button><br>
<transition name="fade">
<img src="img/sun.jpg" width="160" v-if="flage">
</transition>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
flage: true
}
})
</script>
</body>
</html>
1.2 动画案例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
@keyframes fadeIn{
from{opacity: 0;}
to{opacity: 1;}
}
@keyframes fadeOut{
0%{opacity: 1;}
100%{opacity: 0;}
}
.fade-enter-active{animation: fadeIn ease 2s}
.fade-leave-active{animation: fadeOut ease 2s;}
</style>
</head>
<body>
<div id="app">
<h1>动画</h1>
<button type="button" @click="flage=!flage">切换</button><br>
<transition name="fade">
<img src="img/sun.jpg" width="160" v-if="flage">
</transition>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
flage: true
}
})
</script>
</body>
</html>
1.3 动画案例3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../css/animate.min.css" />
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<h1>动画</h1>
<button type="button" @click="flage=!flage">切换</button><br>
<transition name="fade" enter-active-class="rollIn animated" leave-active-class="hinge animated">
<img src="img/sun.jpg" width="160" v-if="flage">
</transition>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
flage: true
}
})
</script>
</body>
</html>