javascript - 如何在 jQuery 和 SASS 中制作一个轻轻闪烁的按钮？

Question

在我的 Rails 应用程序中，有时我必须让某些按钮闪烁/跳动。

这些按钮的颜色各不相同。有些是红色的，有些是绿色的，还有一些是蓝色的。

这是我的 jQuery:

setInterval(function(){
  $('a.flashing').toggleClass('blink');
}, 1000);

这是我的 CSS(实际上是 SASS):

.blink {
  background-color: red;
}

这有效。

但是，我不希望所有按钮都闪烁红色。

相反，为了使这种效果对眼睛更温和一些，每个按钮都应以比其原始颜色稍深的阴影闪烁(如您所知，这可能会有所不同)。

如何使用尽可能少的代码并最好完全不使用 jQuery 插件来实现这一点？

感谢您的帮助。

Answer 1

这是一个创建脉动效果的 SASS(+ Compass)函数。脉动次数可以通过 $count 指定。

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content

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

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

  @keyframes #{$name}
    @content

=animation-name($name)
  -webkit-animation-name: $name
  -moz-animation-name: $name
  -o-animation-name: $name
  animation-name: $name

=animation-duration($duration)
  -webkit-animation-duration: $duration
  -moz-animation-duration: $duration
  -o-animation-duration: $duration
  animation-duration: $duration

=animation-timing-function($timing-function)
  -webkit-animation-timing-function: $timing-function
  -moz-animation-timing-function: $timing-function
  -o-animation-timing-function: $timing-function
  animation-timing-function: $timing-function

=animation-iteration-count($iteration-count)
  -webkit-animation-iteration-count: $iteration-count
  -moz-animation-iteration-count: $iteration-count
  -o-animation-iteration-count: $iteration-count
  animation-iteration-count: $iteration-count

=animation-direction($direction)
  -webkit-animation-direction: $direction
  -moz-animation-direction: $direction
  -o-animation-direction: $direction
  animation-direction: $direction

// define keyframes
+keyframes(change_background_color)
  to
    background-color: $some_color

// define the mixin
=pulsate($time:0.2s, $count:8)
  +animation-name(change_background_color)
  +animation-duration($time)
  +animation-iteration-count($count)
  +animation-direction(alternate)
  +animation-timing-function(ease-in-out)

// use the mixin in a class
.pulsate-8times
  +pulsate(1s, 16)

不需要 JS(切换类除外)。将 $count 设置为 'infinite' 以获得无尽的脉动。

带有编译 CSS 的 JSFiddle:http://jsfiddle.net/3L2yA/

更新:在 SCSS 中相同(感谢 http://sasstoscss.com/ ;-):

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

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

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

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

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

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

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

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

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

@include keyframes(change_background_color) {
  to {
    background-color: $some_color;
  }
}

@mixin pulsate($time: 0.2s, $count: 8) {
  @include animation-name(change_background_color);
  @include animation-duration($time);
  @include animation-iteration-count($count);
  @include animation-direction(alternate);
  @include animation-timing-function(ease-in-out);
}

.pulsate-8times {
  @include pulsate(1s, 16);
}