@import './../theme/vars.scss';

// ray-animate 创建动画

@mixin anim-common($duration: $animation-duration-base) {
  animation-duration: $duration;
  animation-fill-mode: both;
}

@mixin anim-common-leave($duration: $animation-duration-base) {
  animation-duration: $duration;
  animation-fill-mode: both;
}

@mixin make-anim($className, $keyframeName, $duration: $animation-duration-base) {
  .#{$className}-enter,
  .#{$className}-appear {
    @include anim-common($duration);

    animation-play-state: paused;
  }

  .#{$className}-leave {
    @include anim-common-leave($duration);

    animation-play-state: paused;
  }

  .#{$className}-enter.#{$className}-enter-active,
  .#{$className}-appear.#{$className}-appear-active {
    pointer-events: none;
    animation-name: #{$keyframeName}In;
    animation-play-state: running;
  }

  .#{$className}-leave.#{$className}-leave-active {
    pointer-events: none;
    animation-name: #{$keyframeName}Out;
    animation-play-state: running;
  }
}

// react-transition-group 的方式创建动画
// ray-aniamte 的样式，完全适用react-transition-group@1.x 以下， xxx-(enter|leave|appear)、xxx-(enter|leave|appear)-active
// react-transition-group@2.x 及以上版本 xxx-(enter|exit|appear)、xxx-(enter|exit|appear)-active
// @see http://reactcommunity.org/react-transition-group/css-transition

@mixin make-rtg-animate($className, $keyframeName) {
  .#{$className}-enter,
  .#{$className}-appear {
    @include anim-common($animation-duration-base);

    animation-play-state: paused;
  }

  .#{$className}-exit {
    @include anim-common-leave($animation-duration-base);

    animation-play-state: paused;
  }

  .#{$className}-enter.#{$className}-enter-active,
  .#{$className}-appear.#{$className}-appear-active {
    pointer-events: none;
    animation-name: #{$keyframeName}In;
    animation-play-state: running;
  }

  .#{$className}-exit.#{$className}-exit-active {
    pointer-events: none;
    animation-name: #{$keyframeName}Out;
    animation-play-state: running;
  }
}