Hyunhoo's blog

Appearance

Animations ​

css전환은 vue의 transition으로 처리 할 수 있습니다.
그러나 quasar는 바로 사용할 수 있는 Animate.css를 이용할 수 있습니다.

quasar.config ​

js
// embedding all animations
animations: "all";

// or embedding only specific animations
animations: ["bounceInLeft", "bounceOutRight"];

사용 ​

html
<transition
  appear
  enter-active-class="animated fadeIn"
  leave-active-class="animated fadeOut"
>
  <!-- Wrapping only one DOM element, defined by QBtn -->
  <q-btn color="secondary" icon="mail" label="Email" />
</transition>

여러 요소에 같은 에니메이션 사용 ​

html
<transition-group
  appear
  enter-active-class="animated fadeIn"
  leave-active-class="animated fadeOut"
>
  <!-- We wrap a "p" tag and a QBtn -->
  <p key="text">Lorem Ipsum</p>
  <q-btn key="email-button" color="secondary" icon="mail" label="Email" />
</transition-group>

용도에 따른 사용 ​

General

bounce
flash
flip
headShake
heartBeat hinge
jello
pulse
rubberBand shake
shakeX
shakeY
swing
tada
wobble

In

backInDown
backInLeft
backInRight
backInUp
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
fadeIn
fadeInBottomLeft
fadeInBottomRight
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInTopLeft
fadeInTopRight
fadeInUp
fadeInUpBig
flipInX
flipInY
jackInTheBox
lightSpeedInLeft
lightSpeedInRight
rollIn
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
slideInDown
slideInLeft
slideInRight
slideInUp
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp

Out

backOutDown
backOutLeft
backOutRight
backOutUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeOut
fadeOutBottomLeft
fadeOutBottomRight
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutTopLeft
fadeOutTopRight
fadeOutUp
fadeOutUpBig
flipOutX
flipOutY
lightSpeedOutLeft
lightSpeedOutRight
rollOut
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

modifier

repeat
repeat-1
repeat-2
delay-1s
delay-5s
slower
slow
fast
faster