尚硅谷的vue旅程13-02-vue中的过渡与动画02

代码示例

<style>
	.bounce-enter-active {
	  animation: bounce-in .5s;
	}
	.bounce-leave-active {
		/* reverse:反着来 */
	  animation: bounce-in .5s reverse;
	}
	@keyframes bounce-in {
	  /* 时间的位置 */
	  0% {
	    /* scale: 字体到特定时间时所呈现的规模 */
		transform: scale(0);
	  }
	  50% {
	    transform: scale(1.5);
	  }
	  100% {
	    transform: scale(1);
	  }
	}
</style>

 

<div id="example-2">
  <button @click="show = !show">Toggle show</button><br>
  <transition name="bounce">
	  <!-- 当文本内容较少时，可以加上style="display: inline-block;"，效果会更好一点 -->
   	 <p v-if="show" style="background: red; display: inline-block;">Lorem ipsum</p>
  </transition>
</div>

 

<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
	new Vue({
	  el: '#example-2',
	  data: {
	    show: true
	  }
	})
</script>

  在本代码效果中，当文本内容较少时，可以加上style=“display: inline-block;”，效果会更好一点 。
  本篇代码来源于 vue.js官网-过渡与动画篇