Let’s be clear about how this functions: when you first load the page, it works on the first click because the class has not been added.
So you do the very first click upon page load and it works great, but then you need two clicks, why?
It’s because upon the very first click, you add the class and the animation does its thing.
BUT - the class is is still there - it hasn’t been removed.
So it sounds like you need to remove the class after the animation is complete .
Each click adds/removes the class. If you click fast enough, you’ll see the tv static go away / come back instantaneously
1 Like
PaulOB
December 9, 2021, 9:23pm
42
As Ryan said you are simply toggling the class here.
tv.classList.toggle("off");
First click adds the class. second click removes the class and so on…
This is not the same set up as your other pages where you have a class to open the curtains and then you have another class to close the curtains etc.
I assumed you were merging this into your existing page anyway so the toggling won’t be the same as you have here.
asasass
December 9, 2021, 9:35pm
43
I’m using this as a way to test different animation properties so it is easier to test different things.
Clicking on the screen mimics clicking on the exit button.
animation-name: tv-static, shutdown;
animation-duration: 1s, 1s;
animation-delay: 0s, 1s;
animation-fill-mode: forwards;
.curtain.off .fan svg{
animation: fan-spin 2.5s ease 0.8s forwards;
}
Would this be changed to something else where only 1 click is needed?
(function (d) {
const tv = d.querySelector(".curtain");
tv.addEventListener("click", screenOff);
function screenOff() {
tv.classList.toggle("off");
}
})(document);
PaulOB
December 9, 2021, 10:41pm
44
Think about how you did this before and you’d need to check for animation end on the fan animation and then remove the off class.
1 Like
asasass
December 12, 2021, 4:50pm
45
Both of these ways work in the code, only using it for testing different properties, so it doesn’t matter which is used. https://jsfiddle.net/xrvpcL7o/
(function (d) {
const tv = d.querySelector(".curtain");
tv.addEventListener("click", screenOff);
function screenOff() {
tv.classList.remove("off");
setTimeout(() => tv.classList.add("off"), 10);
}
})(document);
/*
(function (d) {
const tv = d.querySelector(".curtain");
tv.addEventListener("click", screenOff);
//---add this---
tv.addEventListener("animationend", function(e) {
if(e.animationName==='fan-spin')screenOff();
});
//--------------
tv.addEventListener('transitionend',screenOff);
function screenOff() {
tv.classList.toggle("off");
}
})(document);
*/
PaulOB
December 12, 2021, 10:03pm
46
Yes both of those are implementations of ideas that I gave you a while ago and will be fine for testing.
1 Like
system
Closed
March 22, 2022, 12:49am
48
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.