1

Без 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>

1
  • опишите желаемое поведение
    – Sergiks
    30 июл 2016 в 23:05

2 ответа 2

4

решение через @keyframes, вроде бы как работает как нужно

var $div = $('<div></div>');

$('body').append($div);

$div.addClass('effect-scale');
$div.addClass('show');
div {
	background: #000;
  height: 100px;
  width: 100px;
	border-radius: 5px;
  visibility: visible;
  transform: scale(1);
}

.show {
  animation: move 1s normal linear;
}

@keyframes move {
  0% {
      transform: scale(0.7);
      visibility: hidden;
      opacity: 0;
    }
100%{
      transform: scale(1);
      visibility: visible;
      opacity: 1;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

0
2

Проблема в том, что современные браузеры оптимизируют работу с DOM. Браузер сначала добавляет класс show в котором описана анимация а после вставляет элемент на страницу и естественно никакой анимации не происходит. Поэтому когда вы используете setTimeout этот блок выполняется чуть позже и браузер его не оптимизирует.

Браузер можно заставить установить элемент на страницу, для этого нужно у элемента запросить какое-нибудь свойство:

var $div = $('<div></div>');
$('body').append($div);
$div.addClass('effect-scale');
var x = $div.css("height");
$div.addClass('show');

В 4 строчке кода мы запрашиваем свойство height и следовательно заставляем браузер выполнить предыдущие строчки кода. Тоже костыль, но выглядит лучше, чем Timeout, проверил работу в Firefox и Chrome.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.