@vue/ui/src/style/animation.styl

UI components used in the vuejs organization apps

// Focus

@keyframes vue-ui-focus
  $color = $vue-ui-accent-500
  0%
    border-color $color
    box-shadow 0 0 20px rgba($color, 2)
  100%
    border-color rgba($color, .6)
    box-shadow 0 0 4px rgba($color, .5)

@keyframes vue-ui-focus-dark
  $color = $vue-ui-accent-300
  0%
    border-color $color
    box-shadow 0 0 20px rgba($color, 2)
  100%
    border-color rgba($color, .6)
    box-shadow 0 0 4px rgba($color, .5)

// Slide

vue-ui-slide($direction, $offset)
  if $direction == bottom
    $transform = "translateY(%s)" % $offset
  else if $direction == top
    $transform = "translateY(-%s)" % $offset
  else if $direction == left
    $transform = "translateX(-%s)" % $offset
  else if $direction == right
    $transform = "translateX(%s)" % $offset
  @keyframes vue-ui-slide-from-{$direction}
    0%
      transform $transform
    100%
      transform none
  @keyframes vue-ui-slide-to-{$direction}
    0%
      transform none
    100%
      transform $transform

$offset = 6px
vue-ui-slide(bottom, $offset)
vue-ui-slide(top, $offset)
vue-ui-slide(left, $offset)
vue-ui-slide(right, $offset)

// Fade

.vue-ui-fade-enter-active,
.vue-ui-fade-leave-active
  transition opacity .15s linear

.vue-ui-fade-enter,
.vue-ui-fade-leave-to
  opacity 0