#Fixed# easy-animation | Animation for Sass

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

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

代码如下：

  1 /* easy-animation.scss */
  2
  3
  4 // easy-animation
  5 // Author: Maple Jan
  6 // Date: 2016-10-21
  7
  8
  9 // Support browser‘s private prefix.
 10 $ea-prefix-for-webkit:       true !default;
 11 $ea-prefix-for-mozilla:      true !default;
 12 $ea-prefix-for-microsoft:    true !default;
 13 $ea-prefix-for-opera:        true !default;
 14 $ea-prefix-for-spec:         true !default; // required for keyframe mixin
 15
 16
 17 // Disable all browser‘s private prefix.
 18 @mixin ea-disable-prefix-for-all() {
 19   $ea-prefix-for-webkit:    false !global;
 20   $ea-prefix-for-mozilla:   false !global;
 21   $ea-prefix-for-microsoft: false !global;
 22   $ea-prefix-for-opera:     false !global;
 23   $ea-prefix-for-spec:      false !global;
 24 }
 25
 26
 27 // Example usage:
 28 // @include ea-transition(all 2s ease 0s);
 29 @mixin ea-transition($value, $prefixs: webkit moz ms o spec) {
 30   @each $prefix in $prefixs {
 31     @if $prefix == webkit {
 32       @if $ea-prefix-for-webkit {
 33         -webkit-transition: $value;
 34       }
 35     }
 36     @else if $prefix == moz {
 37       @if $ea-prefix-for-mozilla {
 38         -moz-transition: $value;
 39       }
 40     }
 41     @else if $prefix == ms {
 42       @if $ea-prefix-for-microsoft {
 43         -ms-transition: $value;
 44       }
 45     }
 46     @else if $prefix == o {
 47       @if $ea-prefix-for-opera {
 48         -o-transition: $value;
 49       }
 50     }
 51     @else if $prefix == spec {
 52       @if $ea-prefix-for-spec {
 53         transition: $value;
 54       }
 55     }
 56     @else  {
 57       @warn "Unrecognized prefix: #{$prefix}";
 58     }
 59   }
 60 }
 61
 62
 63 // Example usage:
 64 // @include ea-transform(scale(1));
 65 @mixin ea-transform($value, $prefixs: webkit moz ms o spec) {
 66   @each $prefix in $prefixs {
 67     @if $prefix == webkit {
 68       @if $ea-prefix-for-webkit {
 69         -webkit-transform: $value;
 70       }
 71     }
 72     @else if $prefix == moz {
 73       @if $ea-prefix-for-mozilla {
 74         -moz-transform: $value;
 75       }
 76     }
 77     @else if $prefix == ms {
 78       @if $ea-prefix-for-microsoft {
 79         -ms-transform: $value;
 80       }
 81     }
 82     @else if $prefix == o {
 83       @if $ea-prefix-for-opera {
 84         -o-transform: $value;
 85       }
 86     }
 87     @else if $prefix == spec {
 88       @if $ea-prefix-for-spec {
 89         transform: $value;
 90       }
 91     }
 92     @else  {
 93       @warn "Unrecognized prefix: #{$prefix}";
 94     }
 95   }
 96 }
 97
 98
 99 // Example usage:
100 // @include ea-animation(wrap_s0_p1, 2s, ease, 0s, infinite);
101 @mixin ea-animation($name, $duration, $function: ease, $delay: 0s, $count: infinite) {
102   -webkit-animation: $name $duration $function $delay $count;
103   -moz-animation: $name $duration $function $delay $count;
104   -ms-animation: $name $duration $function $delay $count;
105   -o-animation: $name $duration $function $delay $count;
106   animation: $name $duration $function $delay $count;
107 }
108
109
110 // Example usage:
111 // @include ea-keyframes(wrap_s0_p1) {
112 //   0% {
113 //     opacity: 1;
114 //     @include ea-transform(scale(1));
115 //   }
116 //   50% {
117 //     opacity: 0.8;
118 //     @include ea-transform(scale(0.8));
119 //   }
120 //   100% {
121 //     opacity: 1;
122 //     @include ea-transform(scale(1));
123 //   }
124 // }
125 @mixin ea-keyframes($name) {
126   $_ea-prefix-for-webkit:       $ea-prefix-for-webkit;
127   $_ea-prefix-for-mozilla:      $ea-prefix-for-mozilla;
128   $_ea-prefix-for-microsoft:    $ea-prefix-for-microsoft;
129   $_ea-prefix-for-opera:        $ea-prefix-for-opera;
130   $_ea-prefix-for-spec:         $ea-prefix-for-spec;
131
132
133   @if $_ea-prefix-for-webkit {
134     @include ea-disable-prefix-for-all();
135     $ea-prefix-for-webkit: true !global;
136     @-webkit-keyframes #{$name} {
137       @content;
138     }
139   }
140   @if $_ea-prefix-for-mozilla {
141     @include ea-disable-prefix-for-all();
142     $ea-prefix-for-mozilla: true !global;
143     @-moz-keyframes #{$name} {
144       @content;
145     }
146   }
147   @if $_ea-prefix-for-microsoft {
148     @include ea-disable-prefix-for-all();
149     $ea-prefix-for-microsoft: true !global;
150     @-ms-keyframes #{$name} {
151       @content;
152     }
153   }
154   @if $_ea-prefix-for-opera {
155     @include ea-disable-prefix-for-all();
156     $ea-prefix-for-opera: true !global;
157     @-o-keyframes #{$name} {
158       @content;
159     }
160   }
161   @if $_ea-prefix-for-spec {
162     @include ea-disable-prefix-for-all();
163     $ea-prefix-for-spec: true !global;
164     @keyframes #{$name} {
165       @content;
166     }
167   }
168
169
170   $ea-prefix-for-webkit:    $_ea-prefix-for-webkit !global;
171   $ea-prefix-for-mozilla:   $_ea-prefix-for-mozilla !global;
172   $ea-prefix-for-microsoft: $_ea-prefix-for-microsoft !global;
173   $ea-prefix-for-opera:     $_ea-prefix-for-opera !global;
174   $ea-prefix-for-spec:      $_ea-prefix-for-spec !global;
175 }