lens/src/renderer/components/animate/animate.scss

/**
 * Copyright (c) 2021 OpenLens Authors
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
 * the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 * the Software, and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

// Animations

@mixin animate-opacity($enterDuration: 100ms, $leaveDuration: 150ms) {
  opacity: 0;

  &.enter {
    transition-property: opacity;
    transition-duration: $enterDuration;
    opacity: 1;
  }

  &.leave {
    transition-duration: $leaveDuration;
    transition-timing-function: ease-out;
    opacity: 0;
  }
}

@mixin animate-slide-right($enterDuration: 100ms, $leaveDuration: 150ms) {
  transform: translateX(100%);
  will-change: transform;

  &.enter {
    transform: translateX(0);
    transition: transform $enterDuration;
    transition-timing-function: ease-in-out;
  }

  &.leave {
    transform: translateX(100%);
    transition: transform $leaveDuration;
  }
}

@mixin animate-opacity-scale($enterDuration: 250ms, $leaveDuration: 150ms) {
  opacity: 0;

  &.enter {
    transition: opacity $enterDuration;
    opacity: 1;
  }

  &.leave {
    will-change: opacity, transform;
    opacity: 0;
    transform: scale(1.25);
    transition: transform $leaveDuration ease-in, opacity $leaveDuration ease-out;
  }
}

.Animate {
  &:empty {
    display: none;
  }

  // Animation name
  &.opacity {
    @include animate-opacity;
  }

  &.slide-right {
    @include animate-slide-right;
  }

  &.opacity-scale {
    @include animate-opacity-scale(100ms);
  }
}