Vue蛙课网学习总结（第二阶段进阶部分-主要讲样式）
01 文本的显示与隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点击" @click="flag=!flag"/>
<br/>
<br/>
<p v-if="flag">abcdef</p>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
"flag" : false
}
})
</script>
</body>
</html>
02.使用动画实现信息淡入淡出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<!-- 自定义两组Vuejs的样式，来控制transition内部的元素实现动画的效果 -->
<style>
/*
v-enter 这是一个时间点，是进入之前，元素的起始状态，此时还没有开始进入
v-leave-to 这时一个时间点 是动画离开之后，离开的终止状态，此时，元素动画已经结束了
*/
.v-enter,.v-leave-to{
/*设置起始状态和结束状态团苏的透明度为0（表示隐藏元素）*/
opacity: 0;
/*
该形式为普通的淡入淡出的动画效果，使用起来最简单，应用的最广泛
*/
/*transform: opacity*/
transform: translateY(150px);
}
/*
.v-enter-active 这是一个时间段，表示元素入场的过程
.v-leave-active 这是一个时间段，表示元素离场的过程
*/
.v-enter-active,.v-leave-active{
/*
设置在指定的事件内完成动画的全部入场和离场的效果
*/
transition: all 1.8s ease;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="点击" @click="flag=!flag"/>
<br/>
<br/>
<!--
对于以下p标签中的信息，我们需要使用动画进行控制
需要使用transition元素，将需要被动画控制的元素包裹起来，对于当前信息的展现，我们需要包裹的就是p标签
transition元素，Vue官方为我们提供的
-->
<transition>
<p v-if="flag">abcdef</p>
</transition>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
"flag" : false
}
})
</script>
</body>
</html>
03，使用动画实现信息弹入弹出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<!-- 自定义两组Vuejs的样式，来控制transition内部的元素实现动画的效果 -->
<style>
.v-enter-active{
/* 设置弹进时长 */
animation: bounce-in 3.5s;
}
.v-leave-active{
/*
设置弹出的时长
正常的弹入弹出，都需要将reverse属性值加上
*/
animation: bounce-in 3.5s reverse;
}
/*
使用vue搭配css动画效果的实现
@keyframes：是CSS3定义的动画规则
bounce-in：表示弹入弹出的效果
*/
@keyframes bounce-in{
0%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="点击" @click="flag=!flag"/>
<br/>
<br/>
<!--
对于以下p标签中的信息，我们需要使用动画进行控制
需要使用transition元素，将需要被动画控制的元素包裹起来，对于当前信息的展现，我们需要包裹的就是p标签
transition元素，Vue官方为我们提供的
-->
<transition>
<p v-if="flag">
abcdefasdfasdfassdfasd111111111111111111111111111111111111111111111<br/>
abcdefasdfasdfassdfasd111111111111111111111111111111111111111111111<br/>
abcdefasdfasdfassdfasd111111111111111111111111111111111111111111111
</p>
</transition>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
"flag" : false
}
})
</script>
</body>
</html>
04.自定义前缀有效区分不同元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<!-- 自定义两组Vuejs的样式，来控制transition内部的元素实现动画的效果 -->
<style>
.tran1-enter-active{
animation: bounce-in .5s;
}
.tran1-leave-active{
animation: bounce-in .5s reverse;
}
.tran2-enter-active{
animation: bounce-in 3.5s;
}
.tran2-leave-active{
animation: bounce-in 3.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="点击1" @click="flag1=!flag1"/>
<br/>
<br/>
<transition name="tran1">
<p v-if="flag1">
abcdefasdfasdfassdfasd111111111111111111111111111111111111111111111<br/>
abcdefasdfasdfassdfasd111111111111111111111111111111111111111111111<br/>
abcdefasdfasdfassdfasd111111111111111111111111111111111111111111111
</p>
</transition>
<br/>
<br/>
<input type="button" value="点击2" @click="flag2=!flag2"/>
<transition name="tran2">
<p v-if="flag2">
abcdefasdfasdfassdfasd111111111111111111111111111111111111111111111<br/>
abcdefasdfasdfassdfasd111111111111111111111111111111111111111111111<br/>
abcdefasdfasdfassdfasd111111111111111111111111111111111111111111111
</p>
</transition>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
"flag1" : false,
"flag2" : false
}
})
</script>
</body>
</html>
05.animate实现动画弹入弹出的样式类库。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./css/animate.css">
</head>
<body>
<div id="app">
<input type="button" value="点击" @click="flag=!flag"/>
<br/>
<br/>
<!--
animate.css为我们提供了
enter-active-class和leave-active-class
用来操作元素进场和离场的效果
以弹出弹出的形式处理进场和离场
animated bounceIn
animated bounceOut
-->
<!--
<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
<p v-if="flag">弹出的信息msg</p>
</transition>
-->
<!--
我们可以将class="animated"写在元素中
这样在enter-active-class和leave-active-class中就不用重复写animated了
使用:duration="毫秒值" 来统一设置入场和离场动画时长
-->
<!--
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
<p v-if="flag" class="animated">弹出的信息msg123</p>
</transition>
-->
<!--
使用 :duration="{enter:200,leave:400}" 来分别设置入场和离场的时长
-->
<transition enter-active-class="bounceIn" leave-active-class="bounceOut"
:duration="{enter:200,leave:400}">
<p v-if="flag" class="animated">弹出的信息msg123123</p>
</transition>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
"flag" : false
}
})
</script>
</body>
</html>
06.使用动画的钩子函数完成特殊的动画效果。(完成商品加入购物车的特效。)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
.ball{
width: 15px;
height: 15px;
border-radius:50%;
background-color: #FF0000
}
</style>
</head>
<body>
<!--小球高度 特别重要参数 -->
<div id="app" style="height:170px">
<input type="button" value="加入购物车" @click="flag=!flag">
<!--
以下@定义的属性，一会使用动画的钩子函数进行相应处理
-->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
</div>
<img src="./image/gwc.png"/>
<script>
var vm = new Vue({
el : "#app",
data : {
"flag" : false
},
methods:{
//注意：动画钩子函数也是具有参数的，一般都会有一个参数叫做el，这个el就是钩子函数的第一个参数
//el表示的是要执行动画的那个DOM元素，是一个原生JS的DOM元素
//大家也可以认为，el是通过document.getElementById('')的方式获取到的原生DOM对象
beforeEnter(el){
//beforeEnter表示动画入场之前，此时，动画尚未开始，可以在beforeEnter中，设置元素开始动画之前的起始样式
//el.style.transform设置小球开始动画之前的起始位置
//translate(0,0)表示的是在坐标为0，0的位置
el.style.transform = "translate(0,0)"
},
enter(el,done){
//这行代码，没有实际的作用，但是如果不写，就不会出现动画的效果
//可以认为，el.offsetWidth会强制启动动画
el.offsetWidth
//enter表示动画开始之后的样式的设置，这里，可以设置小球完成动画之后的结束状态(150px,350px)
el.style.transform = "translate(150px,350px)"
el.style.transition = 'all 1s ease'
//这里的done，起始就是afterEnter这个函数，也就是说，done就是afterEnter函数的引用
done()
},
afterEnter(el){
//在动画完成之后，会调用afterEnter
this.flag = !this.flag
}
}
})
</script>
</body>
</html>
07 .综合应用：信息列表添加（动画滑入）、删除操作（动画滑出）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
<!-- css基础样式-->
li{
border : 1px dashed #999;
margin: 5px;
line-height: 50px;
padding-left: 8px;
font-size: 2px;
width: 80%
}
<!-- 鼠标悬停的属性 -->
li:hover{
background-color: hotpink;
transition:all 0.8s ease;
}
.v-enter,
.v-leave-to{
opacity:0;
transform: translateY(60px)
}
.v-enter-active,
.v-leave-active{
transition: all 0.6s ease;
}
/*
下面的.v-move和.v-leave-active需要配合使用，能够实现列表后续的元素，渐渐的飘上来的这种效果
*/
.v-move{
transition: all 0.6s ease;
}
.v-leave-active{
position: absolute
}
</style>
</head>
<body>
<div id="app">
<!--
定义文本框及按钮
-->
<div>
<label>
Id:
<input type="text" v-model="id"/>
</label>
<label>
Name:
<input type="text" v-model="name"/>
</label>
<input type="button" value="添加" @click="add"/>
</div>
<!--定义动画区域-->
<!--ul-->
<!--
在我们实现列表过渡的时候，如果需要过渡的元素，是通过v-for循环渲染出来的，
则不能使用transition进行包裹，必须要使用transition-group来进行包裹
如果要为v-for循环创建的元素设置动画，必须为每一个元素设置 :key属性（必须是当前记录的id）
给transition添加appear属性 ，在页面刚展现出来的时候，实现入场时候的效果
通过为transition-group元素，设置tag属性，指定transition-group渲染为指定的元素
如果不指定tag属性，默认渲染为span元素
-->
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{
{
item.id}} --- {
{
item.name}}
</li>
</transition-group>
<!--ul-->
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
id : '',
name : '',
list : [
{
id:1,name:'zs'},
{
id:2,name:'ls'},
{
id:3,name:'ww'},
{
id:4,name:'zl'},
{
id:5,name:'sq'}
]
},
methods:{
add(){
//为列表添加对象
this.list.push({
id:this.id,name:this.name})
//将文本框中的数据清空掉
this.id = '';
this.name = '';
},
del(i){
//根据下标删除所在行
this.list.splice(i,1);
}
}
})
</script>
</body>
</html>