Several reasons for this not to work:
transitions of display: none;
for display: block;
are not possible. The element can only transition if it is already on the page. You can give a margin of 10ms, but first it has to be on the page.
the rule transition: all3s
must be already defined in the element and its initial values. Call transition
only with the end value can produce unexpected results in some browsers
My suggestion is to do this with a CSS class only:
function chamar() {
var div = document.getElementById("aparecer");
div.classList.add('chamada');
}
div {
width: 0;
height: 0;
border: 0;
opacity: 0;
transition: all 3s;
}
div.chamada {
width: 500px;
height: 100px;
border: 5px solid blue;
opacity: 1;
}
<p onClick="chamar()">Clica-me!</p>
<div id="aparecer"></div>
If you want to "show up where it is" you have to manipulate the display
and the opacity
one after the other:
function chamar() {
var div = document.getElementById("aparecer");
div.style.display = 'block';
setTimeout(function() {
div.style.opacity = 1;
}, 50);
}
div {
width: 500px;
height: 100px;
border: 5px solid blue;
display: none;
opacity: 0;
transition: opacity 3s;
}
<p onClick="chamar()">Clica-me!</p>
<div id="aparecer"></div>
It would be like putting an animation in the attribute
visibilty
in the same situation as the question?– Laércio Lopes
@Laérciolopes in this case I suggest you take a look here: https://answall.com/a/44684/129 O
visibility
behaves like thedisplay
. Either it is or it is not, it does not allow transitions.– Sergio
Entedi Unaware of display information not working with Transition Entedi the 2 ways, but the second was what you wanted... Thank you...it was so simple
– Soreze martins