图形按钮上的持久 CSS3 过渡效果

Question

我对网络开发有点陌生，我想创建一个具有高亮脉冲效果的图形按钮，让我解释一下：

按钮构建了2层，第一层是默认状态一直显示，第二层是高亮状态（白色）只有当按钮被点击或触摸时才会显示（显示时该层的不透明度为1，隐藏时为 0）。

我的问题是，无论单击或触摸事件的持续时间如何，我都希望高亮的不透明度从 0 变为 1。仅当达到值 1 时才会转换回不透明度 0 值，这意味着在高亮层的不透明度达到 1 之前不应触发释放事件（mouseup 或 touchend）。

我正在使用 Compass (scss) 和带有 phonegap 封装的 jquery mobile。

我编写了一个可行的版本，但没有达到我的目标： 一旦我释放按钮，到高亮状态的转换就会停止（例如，如果我非常快速地触摸，即使在不透明度上有 0.2 秒的转换，高亮状态也是不可见的，尽管触发了 touchend 事件.. . （过渡在到达 1 之前返回到 0）...

整个代码可能不是那么干净，但我正在努力学习:)

欢迎提供任何线索或建议！

HTML 代码如下所示：

<div class=btn-test>
 <span>
  <a class=btn-a href=#>
  </a>
 </span>
</div

SCSS 看起来像这样：

@import "compass/reset";
@import "compass/css3";

.btn-test {

  span {
      @include background-image(image-url("foo.png"));
      background-position: 0px 0px;

      width: 72px;
      height: 70px;

      display: inline-block;
    }

  a {
      @include background-image(image-url("foo.png"));
      background-position: 0 71px;

      @include transition-property(opacity);
      @include transition-duration(0.2s);
      @include transition-timing-function(ease);  

      width: 72px;
      height: 70px;

      display: inline-block;

      -webkit-touch-callout: none !important; 
  }

  .btn-a {

    opacity: 0;
  }

  .btn-a:active {

    opacity: 1;
  }

}

Answer 1

您想要的是动画，而不是简单的过渡。您可以在 0.13 alpha 中使用 gem install compass --pre 获得跨浏览器动画

解决方案是为您的不同状态添加关键帧：

@import "compass/css3/animation";

@include keyframes(flashButton){
  0%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.animate-button {
  @include animate(flashButton 1s ease);
}

然后用一点 jQuery ：

$('.btn-test').on('click', function(){
  //reset state in case animation has already been played
  $('.btn-test').removeClass('animate-button');
  setTimeout(function(){$('.btn-test').addClass('animate-button')}, 1)
});

我还没有使用它，但您也可以使用https://github.com/ericam/compass-animate，这是http://daneden.me/animate/http://daneden.me/animate/ 上的出色 css 动画的指南针端口