圖形按鈕上的持久CSS3過渡效果

Question

我是Web開發的新手，我想創建一個帶有高亮脈沖效果的圖形按鈕，讓我解釋一下：

該按鈕由兩層組成，第一層是始終顯示的默認狀態，第二層是僅在單擊或觸摸按鈕時顯示的突出顯示狀態（白色）（該層的不透明度在顯示時為1，在隱藏時為0） ）。

我的問題是，無論單擊或觸摸事件的持續時間如何，我都希望高亮顯示的不透明度從0變為1。 僅當達到值1時，才發生向不透明度0值的過渡，這意味着在高光層的不透明度達到1之前，不應該觸發釋放事件（鼠標或觸摸結束）。

我正在使用帶電話間隙封裝的Compass（s​​css）和jquery mobile。

我已經編碼了一個可以使用的版本，但是不符合我的目標：釋放按鈕后，就會停止向突出顯示狀態的轉換（例如，如果觸摸非常快，即使不透明度轉換為0.2s，也會立即停止） ，雖然觸發了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

您想要的是動畫，而不是簡單的過渡。 您會在使用gem install compass --pre指南針0.13 alpha中獲得跨瀏覽器動畫

解決方案是為您的不同狀態添加關鍵幀：

@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/上出色的CSS動畫的指南針端口