参考视频:学 Vue.js 看这个就够了
官方文档:Vue.js
文章目录
单元素过渡:transition
过渡类名
- 示例
<style type="text/css">
/*状态1、4*/
.v-enter,
.v-leave-to{
opacity: 0; /*透明度:0*/
transform: translateX(80px); /*位移*/
}
/*两个时间段*/
.v-enter-active,
.v-leave-active{
transition: all 0.8s ease-in-out; /*元素 时间 形式*/
}
</style>
<div class="myapp">
<!--点击按钮:切换h1标题是否渲染-->
<button @click="flag=!flag">按钮</button>
<!--使用Vue提供的transition元素包裹动画区域-->
<transition>
<!--渲染:受flag控制-->
<h1 v-show="flag">标题</h1>
</transition>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'.myapp',
data:{
flag: !true
}
});
</script>
自定义名称
<style type="text/css">
/*状态1、4*/
.my-enter,
.my-leave-to{
opacity: 0; /*透明度:0*/
transform: translateX(80px); /*位移*/
}
/*两个时间段*/
.my-enter-active,
.my-leave-active{
transition: all 0.8s ease-in-out; /*元素 时间 形式*/
}
</style>
<div class="myapp">
<!--点击按钮:切换h1标题是否渲染-->
<button @click="flag=!flag">按钮</button>
<!--使用Vue提供的transition元素包裹动画区域-->
<transition name="my"> <!--定义名称-->
<!--渲染:受flag控制-->
<h1 v-show="flag">标题</h1>
</transition>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'.myapp',
data:{
flag: !true
}
});
</script>
第三方类库animate.css
参考文档:Animate.css
- 演示
<link rel="stylesheet" href="css/animate.css">
<div class="myapp">
<button @click="flag=!flag">按钮</button>
<transition
enter-active-class="animate__bounceIn"
leave-active-class="animate__bounceOut"
:duration="{enter:200, leave:400}"> <!--:duration="400" 统一设置-->
<h1 v-show="flag">标题</h1>
</transition>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'.myapp',
data:{
flag: !true
}
});
</script>
- Vue的transition标签用法
- 进入类:enter-active-class
- 离开类:leave-active-class
- 持续时间::duration
-
Animate.css用法
所需要的类名参考文档
-
Animate.css用法改变
- 原:“animated classname”
- 新:“animate__classname”
Javascript钩子函数
案例:小球半场动画
<style type="text/css">
.ball{ /*CSS定义圆角小球*/
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #28a4c9;
}
</style>
<div class="myapp">
<button @click="flag=!flag">加入购物车</button>
<transition
@before-enter="myBeforeEnter"
@enter="myEnter"
@after-enter="myAfterEnter">
<div v-show="flag" class="ball"></div>
</transition>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'.myapp',
data:{
flag:!true
},
methods:{
myBeforeEnter(el){
el.style.transform = "translate(0, 0)"; //起始位置 //每次点击都会调用
},
myEnter(el, done){
el.offsetWidth; //写了一个offset相关才有效果,强制动画刷新
el.style.transform = "translate(150px, 450px)"; //结束位置
el.style.transition = "all 1s ease"; //动画形式
done(); //done是下面函数的引用
},
myAfterEnter(el){
this.flag = !this.flag; //方法1:渲染消失(有时间停顿,需要在上面参数调用done())
//el.style.display = "none"; //方法2:css消失
}
}
});
</script>
列表过渡:transition-group
属性:appear、tag
- appear:入场效果
<transition-group appear>
<li v-for="item in list"
:key="item"
v-text="item">
</li>
</transition-group>
- tag:规定渲染元素,否则为默认
span
<div class="myapp">
<transition-group appear tag="ul">
<li v-for="item in list"
:key="item"
v-text="item">
</li>
</transition-group>
</div>
- 代码结果:不加tag
- 代码结果:加tag并设置值为ul
## 案例:列表添加
<style type="text/css">
.v-enter,
.v-leave-to{ /*初始*/
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,
.v-leave-active{ /*过程*/
transition: all 0.6s ease;
}
li:hover{ /*鼠标悬停过渡*/
background-color: red;
transition: all 0.8s ease;
}
</style>
<div class="myapp">
<input type="text" v-model="mytext">
<button @click="add">添加</button>
<ul>
<!--使用Vue提供的transition-group元素包裹动画区域-->
<transition-group>
<li v-for="item in list"
:key="item"
v-text="item">
</li>
</transition-group>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'.myapp',
data:{
list: [1, 2, 3],
mytext: null
},
methods:{
add(){
this.list.push(this.mytext);
this.mytext = null;
},
remove(){}
}
});
</script>
案例:列表删除
<style type="text/css">
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.6s ease;
}
li{
width: 100%;
}
li:hover{
background-color: red;
transition: all 0.8s ease; //鼠标悬停过渡
}
.v-move{ /*元素位移时的操作*/
transition: all 0.6s ease;
}
.v-leave-active{
position: absolute;
}
</style>
<div class="myapp">
<ul>
<!--使用Vue提供的transition-group元素包裹动画区域-->
<transition-group>
<!--点击移除-->
<li v-for="(item, index) in list"
:key="item"
v-text="item"
@click="del(index)">
</li>
</transition-group>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'.myapp',
data:{
list: [1, 2, 3],
mytext: null
},
methods:{
del(index){
this.list.splice(index, 1);
}
}
});
</script>