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

要想让动画发生，还得要有元素状态的改变。如何改变元素状态呢，当然就是在css中给这个元素定义一个类（:hover等伪类也可以），或者控制元素的显示隐藏，也可改变元素的状态，这个类描述的是过渡动画结束时元素的状态。

• transition动画

 vue结合原生css动画:

	
	

	 

	


	

 	隐藏和显示 

 	
		{{msg}}
	
	

钩子函数实现动画效果：

	
	
	
	


	

	显示和隐藏数据

	
		
hello vuejs
	
	

• animation.....@keyframes动画

 当前只贴上html和css代码：

			

				

					
请选择您前往目的地的交通方式
				
				

					私车
					乘车
				
				

					确定
				
			

#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);
	}

粗浅见识，相互交流。