turbo-transition/examples/transitions.css

A “minion” for Turbo-Frames and Streams. This custom element transitions elements as they enter or leave the DOM.

/* Fade */
.fade-enter-active, .fade-leave-active {
  transition: opacity var(--transition-duration, 300ms) var(--transition-easing, ease-out);
}

.fade-enter-from, .fade-leave-to { opacity: 0; }

.fade-enter-to, .fade-leave-from { opacity: 1; }


/* Fade move */
.fade-move-enter-active, .fade-move-leave-active {
  transition: all var(--transition-duration, 300ms) var(--transition-easing, ease-out);
}

.fade-move-enter-from {
  opacity: 0;
  transform: 
    translateX(var(--transition-enter-x, 0px))
    translateY(var(--transition-enter-y, 10px))
    scale(var(--transition-enter-scale, 1));
}

.fade-move-leave-to {
  opacity: 0;
  transform: 
    translateX(var(--transition-leave-x, 0px))
    translateY(var(--transition-leave-y, -10px))
    scale(var(--transition-leave-scale, 1));
}

.fade-move-enter-to, .fade-move-leave-from {
  opacity: 1;
  transform: 
    translateX(0)
    translateY(0)
    scale(1);
}


/* Scale */
.scale-enter-active, .scale-leave-active {
  transition: all var(--transition-duration, 200ms) var(--transition-easing, ease-out);
}

.scale-enter-from, .scale-leave-to {
  opacity: 0;
  transform: scale(var(--transition-scale, .95));
}

.scale-enter-to, .scale-leave-from {
  opacity: 1;
  transform: scale(1);
}


/* Collapse */
.collapse-enter-active, .collapse-leave-active {
  transition: 
    opacity var(--transition-duration, 200ms) var(--transition-easing, ease-out),
    max-height var(--transition-duration, 200ms) var(--transition-easing, ease-out);
  overflow: hidden;
}

.collapse-enter-from, .collapse-leave-to {
  opacity: 0;
  max-height: 0;
}

.collapse-enter-to, .collapse-leave-from {
  opacity: 1;
  max-height: var(--transition-max-height, 100vh);
}