CSS opacity control onclick

[adiaz]

Hello,

We have buttons that we want to change opacity to 0 onclick and after 3s they go back to opacity 1 (with fade or some animation).

We want to do it only with CSS. Without using javascript.

Is this posible?

Thanks!

[admin]

It's not possible to do this without JavaScript. Animation will work only until the mouse button is released. So only very short animations can be done this way.

JavaScript:

Code:

$(function() {
  $('body').on('click touchstart', '.item-control', function() {
    this.classList.remove('active');
    this.offsetHeight;
    this.classList.add('active');
  });
});

CSS:

Code:

.item-control.active {
  animation: clickanim 3s ease-out;
}

@keyframes clickanim {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

[adiaz]

It's not possible to do this without JavaScript. Animation will work only until the mouse button is released. So only very short animations can be done this way.

JavaScript:

Code:

$(function() {
  $('body').on('click', '.item-control', function() {
    this.classList.remove('active');
    this.offsetHeight;
    this.classList.add('active');
  });
});

CSS:

Code:

.item-control.active {
  animation: clickanim 3s ease-out;
}

@keyframes clickanim {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Hello admin!

Thanks for the reply.
It works on my laptop but not working with Smartphone. Tried on my Iphone and with Android.

Any suggestion?

Thanks!

[admin]

Replace click with click touchstart so it handles both mouse and touch events.

[adiaz]

Replace click with click touchstart so it handles both mouse and touch events.

Okai, now it works on both systems but not as we want.

When we click a button it does the animation but if we click another, the animation occurs on this button and the previous button.

If we click a third button the animation occurs on the 3 buttons.

Suggestion? Thanks admin!

[admin]

If you want to cancel previous animations then replace Custom JavaScript with this:

Code:

$(function() {
  $('body').on('click touchstart', '.item-control', function() {
    $('.item-control.active').removeClass('active');
    this.offsetHeight;
    this.classList.add('active');
  });
});

[adiaz]

If you want to cancel previous animations then replace Custom JavaScript with this:

Code:

$(function() {
  $('body').on('click touchstart', '.item-control', function() {
    $('.item-control.active').removeClass('active');
    this.offsetHeight;
    this.classList.add('active');
  });
});

Perfect admin!

Work like a charm!

Thanks.