vue第三天动画效果实现

动画效果
一.js实现
v-enter //模块在改变前的状态
v-leave-to //模块在改变后的状态

v-enter-active //模块在改变前的时间
v-leave-active //模块在改变后的时间

//想要控制的模块放在此标签中间

<input type=’’ vaule=’’ @click=’’> //type控制input的属性 vaule控制显示的内容 @click后面跟着绑定的函数

v-for 和 v-show //后面绑定布尔值决定展示内容是否隐藏

<style>//在style里写入动画前后状态
.v-enter,
.v-leave-to{
  opacity:0  //未进入是状态0
  transfrom: (150px) //未进入时位置
}

.v-enter-active,
.v-leave-active{
	transition:all 1s ease,  //all进入状态 1s动画事件  ease
}
</style>
<input type='button' value = '点击事件' @click='falg = !=falg'>//取反值
<transition>
	<h1 v-for|v-show=(data.flag:false)><h1>//绑定vue的data里falg数值决定隐藏属性
</transition>

二.引入第三方库animate完成动画效果
首先需要引入第三方库
通过标签

<link rel='stylesheet' href = 'https://unpkg.com/animate.css@3.5.2/animate.min.css'>

或者通过npm安装

npm install animate.css --save
npm i animate.css -S -D 

安装之后在标签内直接加上class="animated ********"就可以实现动画效果
//更多的动画效果以后尝试

<h1 class="animated bounceOut" v-show = 'fasg'>我是漂漂二号</h1>

三.半程动画需要写完整过程
js的动画是有前半段和后半段的两个周期性函数

v-on:before-enter = ‘beforeEnter’
v-on:enter = ‘Enter’
v-on:after-enter = ‘afterEnter’
v-on:enter-cancelled = ‘enterCancelled’ //暂时用不上
//周期性函数的前半段

v-on:before-leave = ‘beforeLeave’
v-on:leave = ‘Leave’
v-on:after-leave = ‘afterLeave’
v-on:leave-cancelled = ‘leaveCancelled’
//周期性函数后半段

//这是两个半程的动画效果组成了完整的动画效果

示例:

<style>
	.ball{
	weight:150px;
	height:150px;
	border-radius :50%;
	}
	//h1模块的css属性,让它作为一个球
	//border-radius是棱角的弧度
</style>
<input style = 'button' value = '点击事件' @click = 'flag = !flag'>
<transition
@before-enter = 'beforeEnter'
@enter = 'Enter'
@after-enter = 'afterEnter'
//这里没有用上 v-on:enter-cancelled = 'enterCancelled' 
//函数的后半段也没有用上
//@是v-on:的语法糖
//等号后面是metdos里的函数名,要去methos里创建函数
>
	<h1 class= 'ball' v-show = 'flag'></h1>
</transition>
//以上创建了一个点击事件

const app  =new vue ({
	el:'#app',//挂靠的属性,记得要加逗号不然会报错
	data:{
		flag:false;//目前只挂靠flag一个数值控制h1模块的显示和隐藏
				   //flag属性如果开始为true那么动画会在第二次消失是才出现
				   //同样别忘记逗号,代码的规范性
	},
	methods:{//methods,vue中放置函数的位置,不用在属性后加上function
			 //会默认为   变量名:function(){}
	beforeEnter(el){
		el.style.transfrom = translate(0,0)//el是函数里的值
											//style是小球的css属性即开始的位置
											//transition是控制的模块          
											//translate是小球的初始位置
	}
	Enter(el,done){
		el.offsertop  //不加这个会直接到底部,猜测是一直强行刷新动画
		el.style.transfrom = translate(150px,450px)//小球的最终位置
		el.style.transition = 'all 1s ease' //小球在1秒内平稳滑到既定位置
		done() //除了el还有一个done属性,可以让小球属性归零没有延迟
	}
	afterEnter(el){
		this.flag = !this.flag //最后把小球的属性归零,隐藏掉小球
	}
	}
})

这是第二天的内容,可能会有一些错误的内容,但是希望很长时间以后再看能给自己不一样的体会
路漫漫其修远兮,吾将上下而求索!
Hello World!