Без setTimeout
анимация вообще не срабатывает, квадрат появляется сразу, как можно избежать такого костыля?
var $div = $('<div></div>');
$('body').append($div);
$div.addClass('effect-scale');
setTimeout(function () {
$div.addClass('show');
}, 100);
div {
background: #000;
height: 100px;
width: 100px;
border-radius: 5px;
visibility: hidden;
}
div.effect-show {
visibility: hidden;
opacity: 0;
transition: all 1s;
}
div.effect-show.show {
opacity: 1;
transition: all 1s;
}
div.effect-scale {
visibility: hidden;
opacity: 0;
transform: scale(0.7);
transition: all 1s;
}
div.effect-scale.show {
opacity: 1;
transform: scale(1);
transition: all 1s;
}
div.show {
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>