Question

I am kinda new to web development, and I would like to create a graphic button with a highlight pulsed effect, let me explain :

The button is built with 2 layers, the first is the default state always displayed, and the second layer is the highlighted state (white) displayed only when the button is clicked or touched (opacity of this layer is 1 when displayed, 0 when hidden).

My problem is that I would like the opacity of the highlight to go from 0 to 1 regardless the duration of the click or the touch event. The transition back to opacity 0 value should occur only when value 1 has been reached, that means that release events (mouseup or touchend) shouldn’t be triggered until the opacity of the hightlight layer has reached 1.

I am using Compass (scss) and jquery mobile with phonegap encapsulation.

I have coded a version which works, but doesn’t meet my goal :
The transition to highlighted state is stopped as soon as I release the button (for instance, if I make a very quick touch, even with a 0.2s transition on opacity, the highlighted state is not visible, though the touchend event is triggered… (the transition returns to 0 before reaching 1)…

The whole code maybe not so clean, but I am trying to learn 🙂

Any clue or advice is welcome!

the HTML code looks like this :

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

the SCSS looks like this :

@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

What you want is an animation, not a simple transition. You get cross browser animation in compass 0.13 alpha with gem install compass --pre

The solution would be to add keyframes for your different states :

@import "compass/css3/animation";

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

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

And then with a little bit of 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)
});

I didn’t use it yet but you can also use https://github.com/ericam/compass-animate which is a compass port of the great css animations found here http://daneden.me/animate/