ShangシリコンバレーのVueジャーニー13-02-Vue02の移行とアニメーション

コード例

<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の公式ウェブサイトからのものです-トランジションとアニメーション