Yes it was.
If you click the curtains they reverse direction and you can keep clicking and reversing direction until they are fully open of course. After all that was what this thread was about and you didn’t check?
I wasn’t sure where you were adding the hide class dynamically and if it was added to a parent of the curtains then it would break the transition. If you are only adding it to the play buttons then it won’t affect the curtains so you can just use display:none on them.
No you can’t use visibility as it does not remove the elements from the flow and will affect the layout.
You don’t seem to understand the concept very well. When you use display:none the element is gone completely and has no affect on anything and can’t be transitioned. Using the clip method you can make the element appear to be gone but it is still there but just so small you can’t see it. This allows all transitions to work when the clip is removed. It also allows screen readers to see it and make sense of the structure.
It’s called ‘visually hiding’ something as in essence you don’t want to hide content but you just want to see it in a certain order. That’s why on dropdown menus it is preferable not to use display:none but to hide the element off screen or with a method such as clip.
The clip method is the most semantic because both display:none and visibility:hidden can mean the elements are not really accessible.