Contents

//v-fade-out
//v-fade-in
//v-fade-in-out
//v-appear
//v-fade-up
//v-bounce-out
//v-bounce-in
//v-bounce-in-out-out

.v-fade-up-transition {
  @include animation(v-fade-up .5s);
}

.v-fade-in-transition,
.v-fade-out-transition,
.v-appear-transition,
.v-fade-in-out-transition{
  @include transition(all, .3s);
  opacity: 1;
}

.v-appear-enter {
  @include transform(scale(.99));
  opacity: 0;
}

.v-appear-leave {
  @include transform(scale(.99));
  opacity: 0;
}

.v-fade-in-enter,
.v-fade-in-out-enter {
  opacity: 0;
}

.v-fade-out-leave,
.v-fade-in-out-leave {
  opacity: 0;
}

.v-bounce-out-transition,
.v-bounce-in-transition,
.v-bounce-in-out-transition {
  display: inline-block; /* otherwise scale animation won't work */
}

.v-bounce-out-leave,
.v-bounce-in-out-enter {
  @include animation(v-bounce-out .5s);
}

.v-bounce-in-enter,
.v-bounce-in-out-enter {
  @include animation(v-bounce-in .5s);
}


@keyframes v-bounce-out {
  0% {
    @include transform(scale(1));
  }
  50% {
    @include transform(scale(1.3));
  }
  100% {
    @include transform(scale(0));
  }
}

@keyframes v-bounce-in {
  0% {
    @include transform(scale(0));
  }
  50% {
    @include transform(scale(1.3));
  }
  100% {
    @include transform(scale(1));
  }
}


@keyframes v-fade-up {
  from {
    opacity: 0;
    @include transform(translate3d(0, 20px, 0));
  }

  to {
    opacity: 1;
    @include transform(none);
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
codelation_ui-1.0.57	app/assets/stylesheets/codelation_ui/vue_transitions.scss