0

私は Web 開発が初めてで、ハイライト パルス効果を持つグラフィック ボタンを作成したいと思います。説明させてください。

ボタンは 2 つのレイヤーで構築されており、1 つ目は常に表示されるデフォルト状態であり、2 つ目はボタンをクリックまたはタッチしたときにのみ表示されるハイライト状態 (白) です (このレイヤーの不透明度は、表示されている場合は 1、非表示の場合は 0 です)。 ）。

私の問題は、クリックまたはタッチ イベントの期間に関係なく、ハイライトの不透明度を 0 から 1 にしたいということです。不透明度 0 の値に戻る遷移は、値 1 に達した場合にのみ発生する必要があります。つまり、ハイライト レイヤーの不透明度が 1 に達するまで、リリース イベント (マウスアップまたはタッチエンド) がトリガーされるべきではありません。

Compass (scss) と jquery mobile を phonegap カプセル化で使用しています。

機能するバージョンをコーディングしましたが、目標を達成しません。ボタンを放すとすぐに、強調表示された状態への遷移が停止します (たとえば、不透明度で 0.2 秒の遷移があっても、非常にすばやくタッチした場合) 、タッチエンドイベントがトリガーされますが、強調表示された状態は表示されません...（トランジションは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;
  }

}
4

1 に答える 1

1

必要なのはアニメーションであり、単純な遷移ではありません。Compass 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/ にある優れた CSS アニメーションのコンパス ポートです。

于 2012-09-23T11:34:37.843 に答える