vue动画（uniapp版）

<template>
	<view>
		<!-- 1.单元素/组件的过渡 简单使用 -->
	    <button v-on:click="show = !show">简单使用</button>
	    <transition name="fade">
	        <p v-if="show">hello</p>
	    </transition>
	
		<button v-on:click="show1 = !show1">Toggle1</button>
		<transition name="fade1">
		    <p v-if="show1">helloAlice</p>
		</transition>
		<!-- 2. 单元素/组件的过渡 CSS 过渡 （贝塞尔曲线cubic-bezier）-->
		<button cl @click="show2 = !show2">CSS 过渡</button>
		<transition name="slide-fade">
			<p v-if="show2">hello</p>
		</transition>
		<!-- 3. 单元素/组件的过渡 CSS 动画-->
		<button @click="show3 = !show3">CSS 动画</button>
		<transition name="bounce">
		    <p v-if="show3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
		</transition>
		<!-- 4. 单元素/组件的过渡 自定义过渡的类名 -->
		<button @click="show4 = !show4">自定义过渡的类名</button>
		<transition
		    name="custom-classes-transition"
		    enter-active-class="animated tada"
		    leave-active-class="animated bounceOutRight"
		>
		    <p v-if="show4">自定义过渡的类名</p>
		</transition>
		<!-- 5. 单元素/组件的过渡 同时使用过渡和动画-->
		<p>Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。</p>
		<p>但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type attribute 并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。</p>
		<!-- 6.单元素/组件的过渡 显性的过渡持续时间 duration -->
		<button @click="show5 = !show5">显性的过渡持续时间</button>
		<transition name="test" :duration="{ enter: 500, leave: 800 }">
			<p v-if="show5">
				.....显性的过渡持续时间......
			</p>
		</transition>
		<transition :duration="1000">...</transition>
		<transition :duration="{ enter: 500, leave: 800 }">...</transition>
		
		<transition>
		  <button v-bind:key="docState">
		    {
   
   { buttonMessage }}
		  </button>
		</transition>
		
		<view>
			<button v-on:click="show6 = !show6">Toggle transition</button>
			Duration: 
			<input type="range" id="volume" name="volume" min="100" max="3000" v-model="duration"> {
   
   {duration}}ms
			<input v-model="duration" type="range" min="100" max="3000">
			  {
   
   {duration}}ms
			<fade-transition mode="out-in" :duration="durationNumber">
			    <div v-if="show6" class="box"></div>
			</fade-transition>
		</view>
		
		 
	</view>
</template>
<script>
	import FadeTransition from "./FadeTransition.vue";
	export default{
	data(){
		return{
				show: true,
				show1: false,
				show2: true,
				show3: true,
				show4: true,
				show5: true,
				docState:'saved',
				show6: true,
				duration: 1800
			}
		},
	computed: {
	  buttonMessage: function () {
	    switch (this.docState) {
	      case 'saved': return 'Edit'
	      case 'edited': return 'Save'
	      case 'editing': return 'Cancel'
	    }
	  },
	  durationNumber() {
	        return parseInt(this.duration);
	    }
	},
	components: {
	    FadeTransition
	},
	
}
</script>

<style>
	/* 引入css */
	@import url("https://cdn.jsdelivr.net/npm/[email protected]");
	@import url("https://cdn.jsdelivr.net/npm/[email protected]");
	/* 1.单元素/组件的过渡 简单使用 */
	.fade-leave-active {
		transition: opacity 3.5s;
	}
	.fade-enter-active{
		transition: opacity 1.5s;
	}
	.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
	  opacity: 0;
	}
	/*  */
	.fade1-leave-active {
		transition: opacity 3.5s;
	}
	.fade1-enter-active{
		transition: opacity 1.5s;
	}
	.fade1-enter, .fade1-leave-to /* .fade-leave-active below version 2.1.8 */ {
	  opacity: 0;
	}
	/* 2. 单元素/组件的过渡 CSS 过渡 */
	/* /* 可以设置不同的进入和离开动画 */
	/* 设置持续时间和动画函数 */
	.slide-fade-enter-active {
	  transition: all 0.3s ease;
	  /* ease:cubic-bezier(0.25, 0.1, 0.25, 1.0) */
	  /* linear cubic-bezier(0.0, 0.0, 1.0, 1.0) */
	  /* ease-in cubic-bezier(0.42, 0, 1.0, 1.0) */
	  /* ease-out cubic-bezier(0, 0, 0.58, 1.0) */
	  /* ease-in-out cubic-bezier(0.42, 0, 0.58, 1.0) */
	  
	}
	.slide-fade-leave-active {
	   transition: all .8s cubic-bezier(.16,.45,.97,.5);
	  /* cubic-bezier(1.0, 0.5, 0.8, 1.0); */
	  /* transition: all 1.3s ease-in; */
	}
	.slide-fade-enter, .slide-fade-leave-to
	/* .slide-fade-leave-active for below version 2.1.8 */ {
	  transform: translateX(10px);
	  opacity: 0;
	} 
	
	/* 3.CSS 动画 */
	.bounce-enter-active {
	  animation: bounce-in 3.5s;
	}
	.bounce-leave-active {
	  animation: bounce-in 1.5s reverse;
	}
	@keyframes bounce-in {
	 0% {
	    transform: scale(0);
	  }
	  50% {
	    transform: scale(1.1);
	  }
	   100% {
	    transform: scale(0.6);
	  }
	}
	
	.test-enter-active ,.test-leave-active{
		animation: bounce-in;
	}
	
	.my-velocity-transition {
	　position: absolute; top:0px;
	　width: 100px; height: 100px;
	　background: black;
	}
	/*  */
	.box {
	  width: 200px;
	  height: 200px;
	  margin-top: 20px;
	  background-color: rgb(108, 141, 213);
	  box-shadow: rgba(108, 141, 213, 0.5) 0px 6px 20px;
	  border-radius: 10px;
	}
	.red-box {
	  @extend .box;
	  background-color: rgb(251, 17, 116);
	  box-shadow: rgba(251, 17, 116, 0.5) 0px 6px 20px;
	}
</style>