LoginSignup
0
0

More than 5 years have passed since last update.

Vue transition all

Posted at

Vue 最大の利点 transition control

<link href="https://unpkg.com/animate.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vue"></script>
<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
 name="custom-classes-transition"
 enter-class="animated tada"
 enter-active-class="animated tada"
 enter-to-class="animated tada"
 leave-class="animated flipOutX"
 leave-active-class="animated flipInX"
 leave-to-class="animated hinge"                     
  >
    <p v-if="show">hello</p>
  </transition>
</div>

<script type="text/plain" name="animate-cheat-sheet">
bounce  flash   pulse   rubberBand
shake   headShake   swing   tada
wobble  jello   bounceIn    bounceInDown
bounceInLeft    bounceInRight   bounceInUp  bounceOut
bounceOutDown   bounceOutLeft   bounceOutRight  bounceOutUp
fadeIn  fadeInDown  fadeInDownBig   fadeInLeft
fadeInLeftBig   fadeInRight fadeInRightBig  fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig  fadeOutRight    fadeOutRightBig
fadeOutUp   fadeOutUpBig    flipInX flipInY
flipOutX    flipOutY    lightSpeedIn    lightSpeedOut
rotateIn    rotateInDownLeft    rotateInDownRight   rotateInUpLeft
rotateInUpRight rotateOut   rotateOutDownLeft   rotateOutDownRight
rotateOutUpLeft rotateOutUpRight    hinge   jackInTheBox
rollIn  rollOut zoomIn  zoomInDown
zoomInLeft  zoomInRight zoomInUp    zoomOut
zoomOutDown zoomOutLeft zoomOutRight    zoomOutUp
slideInDown slideInLeft slideInRight    slideInUp
slideOutDown    slideOutLeft    slideOutRight   slideOutUp 
</script>
new Vue({
  el: '#example-3',
  data: {
    show: true
  }
})
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0