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 }