scss 动画Mixins

Posted 2021-05-17

$countDefault: 1 !default;
$durationDefault: 1s !default;
$delayDefault: 0s !default;
$functionDefault: ease !default;
$fillDefault: both;
$visibilityDefault: hidden !default;

@mixin count($count: 1) {
  -webkit-animation-iteration-count: $count;
     -moz-animation-iteration-count: $count;
      -ms-animation-iteration-count: $count;
       -o-animation-iteration-count: $count;
          animation-iteration-count: $count;
}

@mixin duration($duration: 1s) {
  -webkit-animation-duration: $duration;
     -moz-animation-duration: $duration;
      -ms-animation-duration: $duration;
       -o-animation-duration: $duration;
          animation-duration: $duration;
}

@mixin delay($delay: .2s) {
  -webkit-animation-delay: $delay;
     -moz-animation-delay: $delay;
      -ms-animation-delay: $delay;
       -o-animation-delay: $delay;
          animation-delay: $delay;
}

@mixin function($function: ease) {
  -webkit-animation-timing-function: $function;
     -moz-animation-timing-function: $function;
      -ms-animation-timing-function: $function;
       -o-animation-timing-function: $function;
          animation-timing-function: $function;
}

@mixin fill-mode($fill: both) {
  -webkit-animation-fill-mode: $fill;
     -moz-animation-fill-mode: $fill;
      -ms-animation-fill-mode: $fill;
       -o-animation-fill-mode: $fill;
          animation-fill-mode: $fill;
}

@mixin visibility($visibility: hidden) {
  -webkit-backface-visibility: $visibility;
     -moz-backface-visibility: $visibility;
      -ms-backface-visibility: $visibility;
       -o-backface-visibility: $visibility;
          backface-visibility: $visibility;
}

@mixin transform($property) {
  -webkit-transform: $property;
     -moz-transform: $property;
      -ms-transform: $property;
       -o-transform: $property;
          transform: $property;
}

@mixin transform-origin($transform-origin: center center) {
  -webkit-transform-origin: $transform-origin;
     -moz-transform-origin: $transform-origin;
      -ms-transform-origin: $transform-origin;
       -o-transform-origin: $transform-origin;
          transform-origin: $transform-origin;
}

@mixin transform-style($transform-style: flat) {
  -webkit-transform-style: $transform-style;
     -moz-transform-style: $transform-style;
       -o-transform-style: $transform-style;
          transform-style: $transform-style;
}

@mixin animation-name($animation-name) {
 -webkit-animation-name: $animation-name;
   -moz-animation-name: $animation-name;
      -ms-animation-name: $animation-name;
       -o-animation-name: $animation-name;
          animation-name: $animation-name;
}

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }

  @-moz-keyframes #{$animation-name} {
    @content;
  }

  @-ms-keyframes #{$animation-name} {
    @content;
  }

  @-o-keyframes #{$animation-name} {
    @content;
  }

  @keyframes #{$animation-name} {
    @content;
  }
}

@include keyframes(rubberBand) {
	  0% {@include transform(scale3d(1, 1, 1));}
   30% {@include transform(scale3d(1.25, 0.75, 1));}
	 40% {@include transform(scale3d(0.75, 1.25, 1));}
	 50% {@include transform(scale3d(1.15, 0.85, 1));}
	 65% {@include transform(scale3d(.95, 1.05, 1));}
	 75% {@include transform(scale3d(1.05, .95, 1));}
	100% {@include transform(scale3d(1, 1, 1));}
}

@mixin rubberBand($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
	@include animation-name(rubberBand);
  @include count($count);
  @include duration($duration);
	@include delay($delay);
	@include function($function);
	@include fill-mode($fill);
	@include visibility($visibility);
}

@import props;
@import rubberBand;
@import fadeIn;
@import fadeOut

/**
* Example implementation
.div {
  @include rubberBand($duration: 0.5s);
}
*/

@include keyframes(fadeOut) {
	  0% {opacity: 1;}
	100% {opacity: 0;}
}

@mixin fadeOut($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
	@include animation-name(fadeOut);
	@include count($count);
	@include duration($duration);
	@include delay($delay);
	@include function($function);
	@include fill-mode($fill);
	@include visibility($visibility);
}

@include keyframes(fadeIn) {
	  0% {opacity: 0;}
	100% {opacity: 1;}
}

@mixin fadeIn($count: $countDefault, $duration: $durationDefault, $delay: $delayDefault, $function: $functionDefault, $fill: $fillDefault, $visibility: $visibilityDefault) {
	@include animation-name(fadeIn);
	@include count($count);
	@include duration($duration);
	@include delay($delay);
	@include function($function);
	@include fill-mode($fill);
	@include visibility($visibility);
}