tt-mp/src/animation-group/index.less

一套组件化、可复用、易扩展的头条小程序 UI 组件库

@import '../styles/mixins/index.less';
@import '../styles/themes/index.less';

.@{wux-prefix}-animate {
  &--fadeIn {
    &-enter {
      transition: opacity 0.3s;
      opacity: 0;
    }

    &-enter-active,
    &-enter-done {
      opacity: 1;
    }

    &-exit {
      transition: opacity 0.3s;
      opacity: 1;
    }

    &-exit-active,
    &-exit-done {
      opacity: 0;
    }
  }

  &--fadeInDown {
    &-enter {
      transition: opacity 0.3s, transform 0.3s;
      opacity: 0;
      transform: translate3d(0, -100%, 0);
    }

    &-enter-active,
    &-enter-done {
      opacity: 1;
      transform: none;
    }

    &-exit {
      transition: opacity 0.3s, transform 0.3s;
      opacity: 1;
      transform: none;
    }

    &-exit-active,
    &-exit-done {
      opacity: 0;
      transform: translate3d(0, -100%, 0);
    }
  }

  &--fadeInLeft {
    &-enter {
      transition: opacity 0.3s, transform 0.3s;
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }

    &-enter-active,
    &-enter-done {
      opacity: 1;
      transform: none;
    }

    &-exit {
      transition: opacity 0.3s, transform 0.3s;
      opacity: 1;
      transform: none;
    }

    &-exit-active,
    &-exit-done {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
  }

  &--fadeInRight {
    &-enter {
      transition: opacity 0.3s, transform 0.3s;
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }

    &-enter-active,
    &-enter-done {
      opacity: 1;
      transform: none;
    }

    &-exit {
      transition: opacity 0.3s, transform 0.3s;
      opacity: 1;
      transform: none;
    }

    &-exit-active,
    &-exit-done {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
  }

  &--fadeInUp {
    &-enter {
      transition: opacity 0.3s, transform 0.3s;
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }

    &-enter-active,
    &-enter-done {
      opacity: 1;
      transform: none;
    }

    &-exit {
      transition: opacity 0.3s, transform 0.3s;
      opacity: 1;
      transform: none;
    }

    &-exit-active,
    &-exit-done {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
  }

  &--slideInUp {
    &-enter {
      transition: transform 0.3s;
      transform: translate3d(0, 100%, 0);
      visibility: visible;
    }

    &-enter-active,
    &-enter-done {
      transform: translateZ(0);
    }

    &-exit {
      transition: transform 0.3s;
      transform: translateZ(0);
    }

    &-exit-active,
    &-exit-done {
      transform: translate3d(0, 100%, 0);
      visibility: visible;
    }
  }

  &--slideInDown {
    &-enter {
      transition: transform 0.3s;
      transform: translate3d(0, -100%, 0);
      visibility: visible;
    }

    &-enter-active,
    &-enter-done {
      transform: translateZ(0);
    }

    &-exit {
      transition: transform 0.3s;
      transform: translateZ(0);
    }

    &-exit-active,
    &-exit-done {
      transform: translate3d(0, -100%, 0);
      visibility: visible;
    }
  }

  &--slideInLeft {
    &-enter {
      transition: transform 0.3s;
      transform: translate3d(-100%, 0, 0);
      visibility: visible;
    }

    &-enter-active,
    &-enter-done {
      transform: translateZ(0);
    }

    &-exit {
      transition: transform 0.3s;
      transform: translateZ(0);
    }

    &-exit-active,
    &-exit-done {
      transform: translate3d(-100%, 0, 0);
      visibility: visible;
    }
  }

  &--slideInRight {
    &-enter {
      transition: transform 0.3s;
      transform: translate3d(100%, 0, 0);
      visibility: visible;
    }

    &-enter-active,
    &-enter-done {
      transform: none;
    }

    &-exit {
      transition: transform 0.3s;
      transform: none;
    }

    &-exit-active,
    &-exit-done {
      transform: translate3d(100%, 0, 0);
      visibility: visible;
    }
  }

  &--zoom {
    &-enter {
      transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
      opacity: 0.01;
      transform: scale(0.75);
    }

    &-enter-active,
    &-enter-done {
      opacity: 1;
      transform: none;
    }

    &-exit {
      transition: all 0.25s linear;
      transform: none;
    }

    &-exit-active,
    &-exit-done {
      opacity: 0.01;
      transform: scale(0.75);
    }
  }

  &--punch {
    &-enter {
      transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
      opacity: 0.01;
      transform: scale(1.35);
    }

    &-enter-active,
    &-enter-done {
      opacity: 1;
      transform: none;
    }

    &-exit {
      transition: all 0.25s linear;
      transform: none;
    }

    &-exit-active,
    &-exit-done {
      opacity: 0.01;
      transform: scale(1.35);
    }
  }
}