Logic Machine Forum
CSS opacity control onclick - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Scripting (https://forum.logicmachine.net/forumdisplay.php?fid=8)
+--- Thread: CSS opacity control onclick (/showthread.php?tid=3783)

CSS opacity control onclick - adiaz - 30.12.2021

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!

RE: CSS opacity control onclick - admin - 03.01.2022

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;
  }
}


RE: CSS opacity control onclick - adiaz - 03.01.2022

(03.01.2022, 06:20)admin Wrote: 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!

RE: CSS opacity control onclick - admin - 03.01.2022

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

RE: CSS opacity control onclick - adiaz - 03.01.2022

(03.01.2022, 10:51)admin Wrote: 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!

RE: CSS opacity control onclick - admin - 03.01.2022

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');
  });
});


RE: CSS opacity control onclick - adiaz - 03.01.2022

(03.01.2022, 11:42)admin Wrote: 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.