#Fixed# easy-animation | Animation for Sass

原文链接：http://www.cnblogs.com/maplejan/p/3659830.html

主要修复3.4版本后变量作用域的问题。

代码如下：

 /* easy-animation.scss */

 // easy-animation
 // Author: Maple Jan
 // Date: 2016-10-21

 // Support browser's private prefix.
 $ea-prefix-for-webkit:       true !default;
 $ea-prefix-for-mozilla:      true !default;
 $ea-prefix-for-microsoft:    true !default;
 $ea-prefix-for-opera:        true !default;
 $ea-prefix-for-spec:         true !default; // required for keyframe mixin

 // Disable all browser's private prefix.
 @mixin ea-disable-prefix-for-all() {
   $ea-prefix-for-webkit:    false !global;
   $ea-prefix-for-mozilla:   false !global;
   $ea-prefix-for-microsoft: false !global;
   $ea-prefix-for-opera:     false !global;
   $ea-prefix-for-spec:      false !global;
 }

 // Example usage:
 // @include ea-transition(all 2s ease 0s);
 @mixin ea-transition($value, $prefixs: webkit moz ms o spec) {
   @each $prefix in $prefixs {
     @if $prefix == webkit {
       @if $ea-prefix-for-webkit {
         -webkit-transition: $value;
       }
     }
     @else if $prefix == moz {
       @if $ea-prefix-for-mozilla {
         -moz-transition: $value;
       }
     }
     @else if $prefix == ms {
       @if $ea-prefix-for-microsoft {
         -ms-transition: $value;
       }
     }
     @else if $prefix == o {
       @if $ea-prefix-for-opera {
         -o-transition: $value;
       }
     }
     @else if $prefix == spec {
       @if $ea-prefix-for-spec {
         transition: $value;
       }
     }
     @else  {
       @warn "Unrecognized prefix: #{$prefix}";
     }
   }
 }

 // Example usage:
 // @include ea-transform(scale(1));
 @mixin ea-transform($value, $prefixs: webkit moz ms o spec) {
   @each $prefix in $prefixs {
     @if $prefix == webkit {
       @if $ea-prefix-for-webkit {
         -webkit-transform: $value;
       }
     }
     @else if $prefix == moz {
       @if $ea-prefix-for-mozilla {
         -moz-transform: $value;
       }
     }
     @else if $prefix == ms {
       @if $ea-prefix-for-microsoft {
         -ms-transform: $value;
       }
     }
     @else if $prefix == o {
       @if $ea-prefix-for-opera {
         -o-transform: $value;
       }
     }
     @else if $prefix == spec {
       @if $ea-prefix-for-spec {
         transform: $value;
       }
     }
     @else  {
       @warn "Unrecognized prefix: #{$prefix}";
     }
   }
 }

 // Example usage:
 // @include ea-animation(wrap_s0_p1, 2s, ease, 0s, infinite);
 @mixin ea-animation($name, $duration, $function: ease, $delay: 0s, $count: infinite) {
   -webkit-animation: $name $duration $function $delay $count;
   -moz-animation: $name $duration $function $delay $count;
   -ms-animation: $name $duration $function $delay $count;
   -o-animation: $name $duration $function $delay $count;
   animation: $name $duration $function $delay $count;
 }

 // Example usage:
 // @include ea-keyframes(wrap_s0_p1) {
 //   0% {
 //     opacity:;
 //     @include ea-transform(scale(1));
 //   }
 //   50% {
 //     opacity: 0.8;
 //     @include ea-transform(scale(0.8));
 //   }
 //   100% {
 //     opacity:;
 //     @include ea-transform(scale(1));
 //   }
 // }
 @mixin ea-keyframes($name) {
   $_ea-prefix-for-webkit:       $ea-prefix-for-webkit;
   $_ea-prefix-for-mozilla:      $ea-prefix-for-mozilla;
   $_ea-prefix-for-microsoft:    $ea-prefix-for-microsoft;
   $_ea-prefix-for-opera:        $ea-prefix-for-opera;
   $_ea-prefix-for-spec:         $ea-prefix-for-spec;

   @if $_ea-prefix-for-webkit {
     @include ea-disable-prefix-for-all();
     $ea-prefix-for-webkit: true !global;
     @-webkit-keyframes #{$name} {
       @content;
     }
   }
   @if $_ea-prefix-for-mozilla {
     @include ea-disable-prefix-for-all();
     $ea-prefix-for-mozilla: true !global;
     @-moz-keyframes #{$name} {
       @content;
     }
   }
   @if $_ea-prefix-for-microsoft {
     @include ea-disable-prefix-for-all();
     $ea-prefix-for-microsoft: true !global;
     @-ms-keyframes #{$name} {
       @content;
     }
   }
   @if $_ea-prefix-for-opera {
     @include ea-disable-prefix-for-all();
     $ea-prefix-for-opera: true !global;
     @-o-keyframes #{$name} {
       @content;
     }
   }
   @if $_ea-prefix-for-spec {
     @include ea-disable-prefix-for-all();
     $ea-prefix-for-spec: true !global;
     @keyframes #{$name} {
       @content;
     }
   }

   $ea-prefix-for-webkit:    $_ea-prefix-for-webkit !global;
   $ea-prefix-for-mozilla:   $_ea-prefix-for-mozilla !global;
   $ea-prefix-for-microsoft: $_ea-prefix-for-microsoft !global;
   $ea-prefix-for-opera:     $_ea-prefix-for-opera !global;
   $ea-prefix-for-spec:      $_ea-prefix-for-spec !global;
 }