How would I add a fade animation to the exit button?
https://jsfiddle.net/tw8re7px/
Also, I’m not using jQuery.
Instead of the exit button appearing on the screen right away, it would fade in.
How would I do that in the code?
Javascript
setTimeout(function() {
document.querySelectorAll(".exit").forEach(function exit(exit) {
exit.style.visibility = "visible";
})
}, 4000);
CSS:
.exit {
visibility: hidden;
}
css:
/* test is applied to a div */
.test {
background-color: black;
height: 100px;
width: 100px;
margin: auto
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
JS:
const div = document.querySelector('.test');
div.addEventListener('click', () => {
div.classList.add('hidden')
})
When the div is clicked it will fade away.
I did not write the hidden class, it was written in stackoverflow:
Why don’t you just use the CSS fade animation you already have?
Putting a change to visibility inside a setTimeout (or a CSS transition/animation) isn’t going to fade anything, visibility is binary. It is either visible or hidden. You can transition/animate the property but it won’t fade. A fade is a change to opacity over time. Opacity is a number (decimal or percentage) that can change over time.
I want the exit button to fade in after the curtains have opened.
I don’t need javascript to do this?
https://jsfiddle.net/vp61xf38/
css
.exit{
visibility: hidden;
opacity: 0;
transition: opacity 8s;
}
javascript
function fadeExit (exitSelector) {
const allExits = document.querySelectorAll(exitSelector);
setTimeout(function() {
function addFade(exit) {
exit.style.visibility = "visible";
exit.style.opacity = 1;
}
allExits.forEach(addFade);
}, 4000);
}
Like this? https://jsfiddle.net/2qLd6t5e/
animation: 8s fadeIn;
animation-fill-mode: forwards;
animation-delay: 8s;
visibility: hidden;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
Not really, I mean you can use the animation ended event and set a class on the button element if you want to do it programmatically. Doing so does mean that if you were to change the duration of the curtains animation the button would still fade at the correct time without having to change anything.
It’s up to you but just using CSS seems a lot simpler (but less flexible).
The simple solution is to remove the setTimeout code and just add opacity and use the fade animation on the .exit class. Set the delay to time the fade as you’d like.
.exit {
position: absolute;
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47.63px;
height: 47.63px;
cursor: pointer;
border: none;
background: transparent;
fill: red;
padding: 0;
opacity: 0;
animation: fade 2s 5s forwards ease;
}
Just to be clear, you shouldn’t be using visibility at all for this.
Is there an issue with using visibility?
Why shouldn’t I be using it?
Because you do not need it and because you are trying to fade the element.
You can not fade visibility, you can fade opacity. Using visibility is like a version of opacity that can only be 1 or 0 but nothing in-between.
I can do this instead: https://jsfiddle.net/vj3feswm/
.exit{
animation: fadeIn 8s forwards 8s;
visibility: hidden;
opacity: 0;
}
@keyframes fadeIn {
to {
visibility: visible;
opacity: 1;
}
}
You can do whatever you want. I still don’t see the point of using visibility.
So that the space stays unclickable until the image appears.
I guess that makes sense.
Anyway, my point was just to make sure you understand how it works when it comes to animations/transitions.
Currently the exit button fades in after the curtains open.
https://jsfiddle.net/q63dzga9/
Adding to that, or, in addition to that,
How would I be able to have the exit button also fade out after it is clicked?
.exit {
animation: fadeIn 8s forwards 8s;
visibility: hidden;
opacity: 0;
}
keyframes fadeIn {
to {
visibility: visible;
opacity: 1;
}
}
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.