vue过渡动画transition、关键帧（keyframes）动画的实现

拼搏现实的明天。 2022-04-04 13:39 925阅读 0赞

> **要想让动画发生，还得要有元素状态的改变。如何改变元素状态呢，当然就是在css中给这个元素定义一个类（:hover等伪类也可以），或者控制元素的显示隐藏，也可改变元素的状态，这个类描述的是过渡动画结束时元素的状态。**
> 
>  *  ### **transition动画** ###
> 
> ** vue结合原生css动画:**
> 
>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>     	<meta charset="UTF-8">
>     	<title>Document</title>
>     
>     	 <style>
>     		.show-enter-active,.show-leave-active{
>     			transition:all 0.4s ease;
>     			padding-left: 10px;
>     		}
>     
>     		.show-enter,.show-leave-active{
>     			padding-left: 100px;
>     		}
>     		
>     	 </style>
>     
>     	<script src="../vue221.js"></script>
>     </head>
>     <body>
>     	<div id="app">
>      	<button @click="toggle">隐藏和显示</button> <br>
>      	<transition name="show">
>     		<span v-show="isshow">{
>         {msg}}</span>
>     	</transition>
>     	</div>
>     </body>
>     <script>
>     new Vue({
>     	el:'#app',
>     	data:{
>     		isshow :false,
>     		msg:'hello vuejs'
>     	},
>     	methods:{
>     		toggle :function(){
>     			this.isshow = !this.isshow;
>     		}
>     	}
>     });
>     </script>
>     </html>
> 
> 钩子函数实现动画效果：
> 
>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>     	<meta charset="UTF-8">
>     	<title>Document</title>
>     	<style>
>     	.show{
>     		transition:all 0.3s ease;
>     	}
>     	</style>
>     	<script src='../vue221.js'></script>
>     </head>
>     <body>
>     	<div id="app">
>     	<button @click="toggle">显示和隐藏数据</button><br>
>     	<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
>     		<div v-if="isshow" class="show">hello vuejs</div>
>     	</transition>
>     	</div>
>     </body>
>     <script>
>     
>     
>     var vm = new Vue({
>     	el:'#app',
>     	data:{
>     		isshow:false
>     	},
>     	methods:{
>     		toggle:function(){
>     			this.isshow = !this.isshow;
>     		},
>     		beforeEnter:function(el){
>     			el.style.transform = "translate(100px,0)";
>     		},
>     		enter:function(el,done){
>     			el.offsetWidth;
>     
>     			el.style.transform = "translate(0px,0)";
>     
>     			done();
>     		},
>     		afterEnter:function(el){
>     			this.isshow =  !this.isshow;
>     		}
>     	}
>     });
>     </script>
>     </html>
> 
>  *  ### **animation.....@keyframes动画** ###
> 
>  当前只贴上html和css代码：
> 
>     <div id="modalBox" v-show="modalStatus" @click="modalStatus=false">
>     			<div class="modalContent" @click.stop>
>     				<div class="modalBody">
>     					<h4>请选择您前往目的地的交通方式</h4>
>     				</div>
>     				<div class="chooseBtn">
>     					<span :style="{backgroundColor:colorStatus}" @click="chooseGoStyle(1)">私车</span>
>     					<span @click="chooseGoStyle(2)" :style="{backgroundColor:colorStatus1}">乘车</span>
>     				</div>
>     				<footer class="modalFooter">
>     					<button id="surebBtn" :disabled="comfirmBtnStatus" :style="{backgroundColor:colorStatus2}" @click="confirmBtn">确定</button>
>     				</footer>
>     			</div>
>     </div>
> 
>     #modalBox h4{
>     	   text-align: center;
>     	   
>     	   padding:0.6rem 0;
>     	   color: rgb(102, 102, 102);
>     	   font-family: "Arial Negreta", "Arial Normal", "Arial";
>     	   font-size: 0.6rem;
>     	   font-style: normal;
>     	   font-weight: 700;
>     	   visibility: visible;
>     	   word-wrap: break-word;
>     	}
>     	#modalBox{
>     	    /*display: none;*/
>     	    width: 100%;
>     	    height: 100%;
>     	    position: fixed;
>     	    left: 0;
>     	    top: 0;
>     	    z-index: 1000;
>     	    background-color: rgba(0,0,0,0.5);
>     	    display:-webkit-flex;
>     		justify-content:center; 
>     		align-items:center; 
>     	}
>     	.modalContent{
>     	    display: flex;
>     	    flex-flow: column nowrap;
>     	    justify-content: space-between;
>     	    width: 80%;
>     	    max-width: 700px;
>     	    /*height: 40%;*/
>     	    /*max-height: 500px;*/
>     	    margin: 100px auto;
>     	    border-radius:10px;
>     	    background-color:#fff;
>     	    -webkit-animation: zoom 0.6s;
>     	    animation: zoom 0.6s;
>     	    resize: both;
>     	    overflow: auto;
>     	    position: relative;
>     	    z-index: 1002;
>     	}
>     	@-webkit-keyframes zoom{
>     	    from {-webkit-transform: scale(0)}
>     	    to {-webkit-transform: scale(1)}
>     	}
>     	@keyframes zoom{
>     	    from {transform: scale(0)}
>     	    to {transform: scale(1)}
>     	}
>     
>     	
>     	.modalBody{
>     	    padding: 10px;
>     	    font-size: 16px;
>     	    box-sizing:border-box;
>     	}
>     	.modalFooter{
>     	    box-sizing:border-box;
>     	    /*border-top:1px solid #ccc;*/
>     	    display: flex;
>     		padding:0.6rem 0;
>     	    justify-content: center;
>     	    align-items: center;
>     	}
>     	.modalContent .chooseBtn{
>     		display: flex;
>     		padding:1rem 0;
>     		justify-content: center;
>     	}
>     	.modalContent .chooseBtn span {
>     		display: inline-block;
>     		font-size: 0.6rem;
>     		padding: 0.3rem 0;
>     		width: 6rem;
>     		border-radius: 5%;
>     		/*background-color: rgba(170, 206, 58, 1);*/
>     		background-color: rgba(221, 221, 221, 1);
>     		text-align:center;
>     		color: rgb(255, 255, 255);
>     		font-family: "Arial Normal", "Arial";
>     		font-style: normal;
>     		font-weight: 400;
>     	}
>     	.modalContent .chooseBtn span:nth-of-type(1){
>     		margin-right: 0.2rem;
>     	}
>     	.modalContent .chooseBtn span:nth-of-type(2){
>     		margin-left: 0.2rem;
>     	}
>     	.modalFooter button {
>     		 display: inline-block;
>     		 border-width:0px;
>     		  width:13rem;
>     		  padding:0.35rem 0;
>     		  font-size: 0.65rem;
>     		  background:inherit;
>     		  background-color:rgba(204, 204, 204, 1);
>     		  border:none;
>     		  border-radius:5px;
>     		  -moz-box-shadow:none;
>     		  -webkit-box-shadow:none;
>     		  box-shadow:none;
>     		  color: rgb(255, 255, 255);
>     	}
> 
> 粗浅见识，相互交流。