// A function that hides or shows a selected element
function hideOrShow1() {
// Select the element with id "theDIV"
var x = document.getElementById("popup_roadmap_info_picture_1");
// If selected element is hidden
if (x.style.display === "block") {
// Show the hidden element
x.style.display = "none";
// Else if the selected element is shown
} else {
// Hide the element
x.style.display = "block";
x.style.transition = "3s";
}
}
I want the element which will be display to have a transition. Is it possible with js. NOTE: x.style.transition is not working.
You can't perform transitions if the element is toggled to display: none. You could use the opacity property or the height and width properties
Which property are you trying to transition? You can't transition display states from none to block, hence why it might seem that style.transition is not working.
You could transition the opacity, transform scale, width or height for an appearing/disappearing effect.
display: none to display:block doesn't have any steps in-between it's like a light switch off/on. You'll need to use a property that has a number value like opacity. When you use the .style attribute, you are overwriting everything within it. So if you do this:
// 👎
x.style.opacity = "1";
x.style.transition = "3s";
If you look in devtools and look at the HTML layout you should see:
<div class='popup' style='opacity:1'></div> <!--👎-->
Then this:
<div class='popup' style='transition:3s'></div> <!--👎-->
You need this:
<div class='popup' style='transition:3s;opacity:1'></div> <!--👍-->
In order to do the whole rulest with all of the properties and values at once you use .cssText property like this:
x.style.cssText = "transition: 3s; opacity:1;"; // 👍
function popup() {
let x = document.querySelector(".popup");
if (x.style.opacity === "0") {
x.style.cssText = "transition: all 3s; font-size: 100px; opacity: 1;";
} else {
x.style.cssText = "transition: all 3s; font-size: 0; opacity: 0;";
}
}
document.querySelector('button').onclick = popup;<button>BOO</button>
<div class='popup' style='opacity: 0; font-size:0;'>👻</div>