PaulOB
February 22, 2024, 3:51pm
21
I’ve only had a quick look because short of time but the one that needs the offset-width is because you remove the class of .hide and then reapply it straight away. That means there is no transition because nothing changed. The offset width rule cause a reflow on the page which acknowledges that the class has been removed and so that when it is immediately reapplied the change is noticed.
In the other one I believe you just either add or remove a class. You don’t remove a class and then reapply the same class immediately.
It was in the code I posted above which you seem to have removed from that demo.
.container {
left: 0;
right: 0;
min-height: 100%;
padding: 8px 8px;
}
100% + 16px = too big.
I can’t tell in that new fiddle whether you have a scrollbar or not as the fiddle is showing a full scrollbar on the opening screen but there shouldn’t be a scrollbar at all. However I think that’s just the fiddle so would need to see a real example and not a fiddle.
1 Like
asasass
February 29, 2024, 10:37pm
23
After clicking the exit button here, it’s not opening, how come?
https://jsfiddle.net/Lmth13bn/3/
.hide + .panel-container .panel-left {
transform: translateX(calc(-100% - 1px));
}
.hide + .panel-container .panel-right {
transform: translateX(calc(100% + 1px));
}
This code uses modal: https://jsfiddle.net/j759xac4/1/
and uses this:
<template id="image-templateA">
<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
<div>
<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
</div>
<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
</template>
<div class="panel-container">
<div class="slide panel-left">
<div class="inner">
<div class="container2"></div>
</div>
</div>
<div class="slide panel-right">
<div class="inner">
<div class="container2"></div>
</div>
</div>
</div>
The code I am trying to get working has modal removed .
https://jsfiddle.net/Lmth13bn/3/
uses the same image html as the modal code
and uses this:
.hide + .panel-container .panel-left {
transform: translateX(calc(-100% - 1px));
}
.hide + .panel-container .panel-right {
transform: translateX(calc(100% + 1px));
}
Maybe something in the css needs to be adjusted, I am not sure.
I do know that it doesn’t slide open, just stays still.
PaulOB
March 1, 2024, 4:49pm
26
Isn’t it obvious?
You know what the adjacent selector (+) selects don’t you?
.hide + .panel-container
It selects the next sibling following the .hide element.
However you have gone and stuck your template element between those two so the panel-container is never found…
The panel container is now two steps away.
e.g.
.hide + * + .panel-container .panel-left {
transform: translateX(calc(-100% - 1px));
}
.hide + * + .panel-container .panel-right {
transform: translateX(calc(100% + 1px));
}
1 Like
I just realized,
This can be kept at the bottom of the html:
<template id="image-templateA">
<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
<div>
<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
</div>
<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
</template>
Then it would stay as this, https://jsfiddle.net/h3Lbjerq/5/
.hide + .panel-container .panel-left {
transform: translateX(calc(-100% - 1px));
}
.hide + .panel-container .panel-right {
transform: translateX(calc(100% + 1px));
}
How come this sliding curtain is not opening? https://jsfiddle.net/9zL7xb0v/3/
video, button, sliding curtain code.
.modalA:not(.open)~.panel-container .panel-left {
transform: translateX(calc(-100% - 1px));
}
.modalA:not(.open)~.panel-container .panel-right {
transform: translateX(calc(100% + 1px));
}
After clicking the 2nd exit button, the sliding panel does not open.
It seems, when I did this: <div class="outer-container hide">
The code ceased being a modal anymore. I guess that would be accurate.
If hide is being used on the open-container, then .open is not required in the html, css or js.
Works now: https://jsfiddle.net/3e9thL1x/1/
I removed .open from the html, css, and js.
I guess this is no longer needed now?
body:has(.modalA.open) {
overflow: hidden;
}
or all this:
function handleModal(modalId) {
const modal = document.getElementById(modalId);
modal.style.display = "none";
modal.classList.add("open");
modal.offsetWidth = modal.offsetWidth;
modal.classList.remove("open");
}
I made 1 change to the html:
.containerA now holds both the curtain video and the modal buttons.
Before it just held the curtain.
I wanted to give the same background to both, so I figured I would put the container around both.
Learned a lot from that.
<div class="containerA">
<div class="curtain">
<button class="exitA" type="button" title="Exit" aria-label="Close"></button>
<div class="ratio-keeper">
<div class="video-one "></div>
<div class="wrap">
<div class="video video-frame" data-id="djV11Xbc914"></div>
</div>
</div>
<div class="playInitial"></div>
</div>
<div id="myModal" class="modalA hide">
<div class="modal-content">
<button class="exitB" type="button" title="Exit" aria-label="Close"></button>
<div class="buttonContainer">
<button data-destination="#ba" class="playButton ba">ButtonA</button>
<button data-destination="#bb" class="playButton bb">ButtonB</button>
<button data-destination="#bc" class="playButton bc">ButtonC</button>
</div>
</div>
<div id="ba" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="video video-frame" data-id="CHahce95B1g"></div>
<div class="buttonA"></div>
<div class="panel">
</div>
</div>
<button class="close">×</button>
</div>
</div>
<div id="bb" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="video video-frame" data-id="CHahce95B1g"></div>
<div class="buttonB"></div>
<div class="panel">
</div>
</div>
<button class="close">×</button>
</div>
</div>
<div id="bc" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="video video-frame" data-id="CHahce95B1g"></div>
<div class="buttonC"></div>
<div class="panel">
</div>
</div>
<button class="close">×</button>
</div>
</div>
</div>
</div>
PaulOB
March 4, 2024, 3:50pm
29
I believe that was being used so that content under a modal would not scroll but it doesn’t look like you need it now.
1 Like
This one is not opening because? https://jsfiddle.net/vbrtcwh2/6/
Would I be writing the css differently?
.hide+.curtain-containerC .curtain-leftC {
transform: translateX(-100%);
}
.hide+.curtain-containerC .curtain-rightC {
transform: translateX(100%);
}
<div class="outer-containerA hide">
<div class="curtain-containerC">
<div class="slide curtain-leftC">
<div class="inner">
<div class="container2"></div>
</div>
</div>
<div class="slide curtain-rightC">
<div class="inner">
<div class="container2"></div>
</div>
</div>
</div>
Would I do something similar to this?
.outer-containerB.hide {
display: block;
opacity: 0;
pointer-events: none;
}
.video-containerC.slide .curtain-leftE {
transform: translateX(-100%);
}
.video-containerC.slide .curtain-rightE {
transform: translateX(100%);
}
I tried this: https://jsfiddle.net/h32fb41u/1/
.hide+.curtain-containerC .curtain-leftC {
transform: translateX(-100%);
}
.hide+.curtain-containerC .curtain-rightC {
transform: translateX(100%);
}
/*.outer-containerA.hide {
display: none;
}*/
.outer-containerA.hide {
display: block;
opacity: 0;
pointer-events: none;
}
When I do this: https://jsfiddle.net/h32fb41u/4/
The curtain slides from left to right.
I’m stuck.
.hide .curtain-containerC .curtain-leftC.slide {
transform: translateX(-100%);
}
I’m puzzled: Why are these closing in reverse?https://jsfiddle.net/aj7ys8g9/2/
.hide .curtain-containerC .curtain-leftC.slide {
transform: translateX(-100%);
}
.hide .curtain-containerC .curtain-rightC.slide {
transform: translateX(100%);
}
Isn’t this curtain:
<div class="outer-containerA hide">
<div class="curtain-containerC">
<div class="slide curtain-leftC ">
<div class="inner">
<div class="container2"></div>
</div>
</div>
<div class="slide curtain-rightC">
<div class="inner">
<div class="container2"></div>
</div>
</div>
</div>
Similar to how this curtain is written?
<div class="outer-containerB hide">
<div class="containerB">
<div class="video-containerC">
<button class="exitE exit" type="button" title="ExitE" aria-label="Close"></button>
<div class="ratio-keeper">
<div class="wrapB">
<div class="video playk"></div>
</div>
<div class="curtain-leftE">
</div>
<div class="curtain-rightE">
</div>
</div>
<div class="playk"></div>
</div>
Maybe I am doing something wrong.
PaulOB
March 18, 2024, 1:41pm
33
Three things:
It’s not an adjacent sibling its a descendant so remove the plus.t
You want the action to happen when its not .slide.
:not(hide) .curtain-containerC .curtain-leftC {
transform: translateX(-100%);
}
:not(hide) .curtain-containerC .curtain-rightC {
transform: translateX(100%);
}
Thirdly it still won’t work because there is no transition state. It’s display:none and then you turn it on and so there is no to and from transition unless you do the add and remove class hack which it doesn’t seem you are doing (I didn’t check).
I don’t know why you don’t use the keyframe as that will always work.because it forces a start and end state.
I know how keyframes work,
What do you mean by remove class hack?
I did a search on here for “remove class hack”
It says it hasn’t been used.
I am trying to figure out this one:https://jsfiddle.net/5g8rm7yk/1/
:not(hide) .curtain-containerC .curtain-leftC {
transform: translateX(-100%);
}
:not(hide) .curtain-containerC .curtain-rightC {
transform: translateX(100%);
}
.outer-containerA.hide {
display: block;
opacity: 1;
pointer-events: none;
}
Isn’t this a transition state?
From AI Copilot:
Yes, you’re correct. The CSS code you’ve posted is indeed defining a transition state.
.curtain-leftC,
.curtain-rightC {
position: fixed;
height: 100%;
width: 50%;
top: 0%;
overflow: hidden;
z-index: 2;
transform: translateX(0);
transition: transform 7s cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay: 3s;
}
The other one used this:
Where :not(hide) was not used on it, how come?
Maybe I am mixing apples with oranges here and that this one is written differently:
.outer-containerB.hide {
display: block;
opacity: 0;
pointer-events: none;
}
.outer-containerB.hide .exitE {
pointer-events: none;
}
.video-containerC.slide .curtain-leftE {
transform: translateX(-100%);
}
.video-containerC.slide .curtain-rightE {
transform: translateX(100%);
}
Maybe you meant this instead? It’s still not opening though:
https://jsfiddle.net/bqvtLdnu/2/
If I am using slide, why am I using not?
:not(.hide) .curtain-containerC.slide .curtain-leftC {
transform: translateX(-100%);
}
:not(.hide) .curtain-containerC.slide .curtain-rightC {
transform: translateX(100%);
}
js:
This is a remove class hack?
function showContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.remove("hide");
}
function resetPage() {
hideContainer(".containerA");
showExit(".curtain-containerC", ".exitC");
showContainer(".outer-containerA");
}
I am still confused what I need to be doing for it to work.
I don’t remember how the hack was written, did you ever mention to me that it was a hack?
I am looking through a jungle of saved code versions trying to find it.
I found this: What you meant by hack?
This same thing?
function showSplashScreen(splashScreenSelector) {
const splashScreen = document.querySelector(splashScreenSelector);
splashScreen.style.pointerEvents = "auto";
splashScreen.classList.remove("hide");
splashScreen.offsetWidth = splashScreen.offsetWidth;
splashScreen.classList.add("hide");
splashScreen.addEventListener("transitionend", function() {
splashScreen.style.pointerEvents = "none";
});
}
function showContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.remove("hide");
}
function resetPage2() {
hideContainer2(".containerA");
showSplashScreen(".splash-screen3");
showContainer(".containerB");
}
Now I have this: https://jsfiddle.net/ke89n01q/1/
I am still confused here, then what?
very confused.
function showCurtain(curtainSelector) {
const curtain = document.querySelector(curtainSelector);
curtain.style.pointerEvents = "auto";
curtain.classList.remove("hide");
curtain.offsetWidth = curtain.offsetWidth;
curtain.classList.add("hide");
}
function resetPage() {
hideContainer(".containerA");
showExit(".curtain-containerC", ".exitC");
showContainer(".outer-containerA");
showCurtain(".curtain-containerC");
}
The curtain is not being hidden, so I don’t understand:
<div class="outer-containerA hide">
<div class="curtain-containerC">
<div class="slide curtain-leftC">
<div class="inner">
<div class="container2"></div>
</div>
</div>
<div class="slide curtain-rightC">
<div class="inner">
<div class="container2"></div>
</div>
</div>
</div>
It is opening now: https://jsfiddle.net/zqsnt74a/3/
no hack was used here:
:not(.hide)>.curtain-containerC .curtain-leftC{
transform: translateX(-100%);
}
:not(.hide)>.curtain-containerC .curtain-rightC {
transform: translateX(100%);
}
There is not a way for it to use slide where then :not(.hide) is not needed?
I thought it was use one or the other? https://jsfiddle.net/zqsnt74a/5/
.curtain-containerC.slide .curtain-leftC {
transform: translateX(-100%);
}
:not(.hide)>.curtain-containerC .curtain-rightC {
transform: translateX(100%);
}
Similar to this one, where :not is not used here.
.outer-containerB.hide {
display: block;
opacity: 0;
pointer-events: none;
}
.video-containerC.slide .curtain-leftE {
transform: translateX(-100%);
}
.video-containerC.slide .curtain-rightE {
transform: translateX(100%);
}
How is this fixed?
After I did this: https://jsfiddle.net/kvpga0os/
:not(.hide)>.curtain-containerC .curtain-leftC{
transform: translateX(-100%);
}
:not(.hide)>.curtain-containerC .curtain-rightC {
transform: translateX(100%);
}
.outer-containerA.hide {
display: block;
opacity: 0;
pointer-events: none;
}
Now this is not working:
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.wrapB.visible,
.outer-containerA .wrapB:not(.wrapB.visible),
.outer-containerB .wrapB:not(.wrapB.visible) {
opacity: 0;
animation: fadeIn 3s ease-in forwards;
animation-delay: 700ms;
}
Last time it was working: https://jsfiddle.net/d792vebs/
I tried doing this:
.wrapB.visible,
.outer-containerA .wrapB:not(.wrapB.visible, .hide),
.outer-containerB .wrapB:not(.wrapB.visible, .hide)
It did not work.
That code allowed the videos to fade in:
<div class="containerPageA">
videos not fading in.
<div class="containerPageB">
videos are fading in.
html:
<div class="outer-containerA hide">
<div class="curtain-containerC">
<div class="slide curtain-leftC">
<div class="inner">
<div class="container2"></div>
</div>
</div>
<div class="slide curtain-rightC">
<div class="inner">
<div class="container2"></div>
</div>
</div>
</div>
<div class="containerPageA">
<div class="video-containerB">
<div class="ratio-keeper ">
<div class="wrapB">
<div class="video playa" data-id=""></div>
</div>
</div>
<div class="playa"></div>
</div>
<div class="video-containerB">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video playb" data-id=""></div>
</div>
</div>
<div class="playb"></div>
</div>
<div class="video-containerB">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video playc" data-id=""></div>
</div>
</div>
<div class="playc"></div>
</div>
<div class="video-containerB">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video playd" data-id=""></div>
</div>
</div>
<div class="playd"></div>
</div>
<div class="video-containerB">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video playe" data-id=""></div>
</div>
</div>
<div class="playe" data-id="AxLxnN6z0Og"></div>
</div>
<div class="blog-pager">
<button class="exitC exit" type="button" title="Exit" aria-label="Close"></button>
</div>
</div>
<div class="curtain-containerD hide">
<div class="slide curtain-leftD">
<div class="inner">
<div class="container2"></div>
</div>
</div>
<div class="slide curtain-rightD">
<div class="inner">
<div class="container2"></div>
</div>
</div>
</div>
<div class="containerPageB hide">
<div class="video-containerB">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video playf" data-id="CHahce95B1g"> </div>
</div>
</div>
<div class="playf"></div>
</div>
<div class="video-containerB">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video playg" data-id="AxLxnN6z0Og"></div>
</div>
</div>
<div class="playg"></div>
</div>
<div class="video-containerB">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video playh" data-id="AxLxnN6z0Og"></div>
</div>
</div>
<div class="playh"></div>
</div>
<div class="video-containerB">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video playi" data-id="AxLxnN6z0Og"></div>
</div>
</div>
<div class="playi"></div>
</div>
<div class="video-containerB">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video playj" data-id="AxLxnN6z0Og"></div>
</div>
</div>
<div class="playj"></div>
</div>
<div class="blog-pager ">
<button class="exitD exit" type="button" title="Exit" aria-label="Close"></button>
</div>
</div>
PaulOB
March 18, 2024, 8:13pm
40
I already explained this. you seem to be going around in circles and mixing problems we already solved in one way and another.
The reason that one is working is because it is never hidden to start with.
.outer-containerA.hide {
display: block;
opacity: 1;
pointer-events: none;
}
It is just under the other content so you can’t see it. Therefore when you remove the hide class you get a transition for left:0 to left-100% etc. If instead the element was hidden with display:none then there is no change when you reveal it because that becomes its current state immediately. I have explained this before.
But now this is broken: Post#39
I don’t know why that broke and I don’t know how to fix it.
<div class="containerPageA">
videos not fading in.
<div class="containerPageB">
videos are fading in.
This one would be changed to something different?
.outer-containerA .wrapB:not(.wrapB.visible),display: block;
Can I do that?
Am I not able to?
I did not know it was going to cause that to break.
This one is working:.outer-containerB .wrapB:not(.wrapB.visible)
I created a tester here:
Is this something that can be fixed?
fade in video does not works: https://jsfiddle.net/gu3x7yn6/3/
.outer-containerB.hide {
display: block;
opacity: 0;
pointer-events: none;
}
animation-delay: 700ms;
fade in video works: https://jsfiddle.net/gu3x7yn6/5/
.outer-containerB.hide {
display: none;
opacity: 0;
pointer-events: none;
}
animation-delay: 700ms;
Animation code:
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.wrapB.visible,
.outer-containerA .wrapB:not(.wrapB.visible),
.outer-containerB .wrapB:not(.wrapB.visible) {
opacity: 0;
animation: fadeIn 3s ease-in forwards;
animation-delay: 700ms;
}
I think the rule of thumb here is, if I am using display: block, then transition should be used.
PaulOB
March 19, 2024, 5:42pm
43
I don’t think you have understood the point I keep mentioning so i will try once again to clarify.
If you have an element like this:
.test{
display:block;
transition:1s ease;
opacity:1;
}
.test.hide{
display:none;
opacity:0;
}
When you remove the class of hide and the element becomes visible it appears immediately on screen at opacity:1. It has never been at opacity:0 because it was display:none.
For as transition to work there must be 2 active states. Therefore this will work.
.test{
display:block;
transition:1s ease;
opacity:1;
}
.test.hide{
opacity:0;
}
However the .hide version doesn’t remove the element but makes it invisible with the opacity:0; You would also need to set pointer-events:none on the .hide version and move it offscreen or make its height and width zero to start with.
In your other example you didn’t need to hide the element at all because you just plonked other content right on top of it.
For transition to work both states of the element bust be alive and not hidden with display:none. You can think of display:none as removing the element so its not there. None of the rules except display:none will apply.
Here’s a bare bones example to get the point across.
2 Likes
