@inkline/inkline/components/IExpandTransition/css/index.css

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

/**
 * Expand Transition
 */
.expand-enter-active,
.expand-leave-active {
  transition-property: height;
  transition-duration: var(--expand-transition--transition-duration, var(--transition-duration));
  transition-timing-function: var(--expand-transition--transition-timing-function, var(--transition-timing-function));
  overflow: hidden;
}

.expand-enter,
.expand-leave-to {
  height: 0;
}

.expand-enter-from,
.expand-enter-active,
.expand-leave-active,
.expand-leave-to {
  will-change: height;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}