#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: 1;
//     @include ea-transform(scale(1));
//   }
//   50% {
//     opacity: 0.8;
//     @include ea-transform(scale(0.8));
//   }
//   100% {
//     opacity: 1;
//     @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;
}