I have a sidebar toggled with a button using this function:
var x = document.getElementById(“sidebar”);
if (x.style.display === “block”) {
x.style.display = “none”;
} else {
x.style.display = “block”;
}
and it’s working fine! but I need the transition IN/OUT
I should add something like:
transition: all .5s;
I’ve tried adding in different ways, all over, but give a syntax error and nothing happens
It will be something like
x.style.transition = “all .5s linear”;
You could also add or remove a class to achieve this as an alternative approach. Or a toggle.
x.classList.add(“myclass”);
x.classList.remove(“myclass”);
Thanks Pete, you are always enlightening and helpful.
I will try both methods you suggested (since I am still very poor on the syntax of the code, I have to proceed in a very empirical way by making several attempts, and to say different is a neofemism 
) so let’s try to see if I can make it work. 
PS I had thought about alternating the visibility of the sidebar not with display block / none but with opacity 0/1 where perhaps the transition seems more relevant to me, but I don’t know, maybe I’m wrong …
If you make it transparent, users can still click on it. You can use an opacity transition, but you should still display none it.
anyway, for convenience here a video that better shows the problem, where you can notice the lack of smoothness in the transition:
The menu button (burger) I made in Hype and it has the functions to control the full screen menu (before was a sidebar menu)
…therefore Pete, new day, new ideas, so I tried to start on simple.
Here the 2 examples I named “Display” and “Opacity”
Display and Opacity.zip (2.4 KB)
both working but both incomplete because, as highlighted yesterday, “Opacity” has the effect I am looking for but rightly as you said, when transparent, people can still click on it, and “Display” is what I use at the moment but, as mentioned , it lacks transition. So I started all the tests of the case trying to follow all your good advice but at the moment it really seems that Display, Opacity and Transition do not get along, when they are in my house 
Here one of my tests, maybe you can take a look and maybe you could help me understand why it doesn’t work or what I did wrong
prova_toggle_TEST_01.html.zip (1.4 KB)
anyway thank you very much for your help and wise advice, I hope to be able to reciprocate one day 
Could this be the problem for which I cannot run an opacity transition and display: none at the same time?
Here there is the display and opacity toggled together but not the transition:
prova_toggle_TEST_02.html.zip (1.2 KB)
You can use css animation key frames too.
Sorry haven’t checked the files. I’m not on my Mac.
css animation is cool!!
I might as well use Blocs animation, but unfortunately there is only the possibility of adding via “when Appear on Screen”, so the outgoing is missing. This would perhaps be a good request for the good Norm as a wish for Blocs22
Hi @PeteSharp Pete, with satisfaction finally I can say that I have solved the problem for this Topic, and just like I wanted it to be. Finally Display-none, Opacity and Transition live together under one roof and it also seems in perfect family harmony, no more fights, especially in my head 
.
Anyway I used .addEventListener () and setTimeout () to complete the function making sure that the opacity transitions are not cut off by the immediacy of none / block (on / off) display.
Exciting little improvements from a novice beginner like me 
thanks for the valuable clues and advice 
Nice. I was waiting to see if you figured out the timeout 
