Отключить видимость элемента, изменить innerHTML и вернуть обратно

Question

Отключить видимость элемента, изменить innerHTML и вернуть обратно

0

У меня есть элемент на моей HTML-странице, который я хочу предоставить динамический контент, и я хочу, чтобы вставленный HTML переходил с 0% на 100% непрозрачность.

HTML

<div id="content"></div>

CSS

#content {
  opacity: 1;
  transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
}

#content.hide {
  opacity: 0;
}

JavaScript

function setContent(html) {
  var content = document.getElementById("content");

  //Set hide class
  content.className += " hide";

  //Set HTML
  content.innerHTML = html;

  //Unset hide class
  content.className = content.className.replace(/(?:^|\s)hide(?!\S)/g, '');
}

Обратите внимание, что setContent() устанавливает, а затем отключает класс hide. Однако кажется, что браузер (по крайней мере, Chrome) не делает недействительным элемент контента до тех пор, пока он не вернется из функции, поэтому элемент не получит шансов на транзистор. Как я могу убедиться, что анимация играет?

EDIT: чтобы быть ясным, setContent() вызывается после загрузки DOM. Представьте приложение, которое очищает и повторно заполняет экран при возникновении какого-либо действия.

Maarten 19 окт. 2013, в 16:24

Источник

0

Это внутри DOM ready ?
Yang 19 окт. 2013, в 14:33
0

Какая? setContent является глобальной функцией.
Maarten 19 окт. 2013, в 14:45
0

Эти 4 строки javascript запускаются быстрее, чем за 1 мс, как насчет setTimeout?
KiT O 19 окт. 2013, в 15:25
0

Да, setContent() является глобальной функцией. Если вы не видите смысла, сделайте это: 1) var foo = document.getElementById("content"); alert(foo); запустите этот код за пределами window.onload . Это предупредит undefined даже если элемент существует. Теперь поместите то же самое в window.onload = function(){..Here..} и вы увидите разницу
Yang 19 окт. 2013, в 16:14
0

О, теперь я понимаю, что вы имеете в виду. Но моя проблема не в том, что DOM еще не загружен, а в том, что JS работает так быстро, что я не могу «сбросить» анимацию непрозрачности.
Maarten 19 окт. 2013, в 17:33

Показать ещё 3 комментария

Теги:

javascript

html

css

2 ответа

0

Можете ли вы быть более ясными, каков контекст этого?

Также, где вы вызываете функцию? Это место, где вы вызываете функцию внутри функции DOM ready?

В jQuery это будет примерно так:

$(document).ready(function(){
    //call the function inside here.
});

codeninja 19 окт. 2013, в 15:00

0

Эта функция не заставит мою анимацию работать, а также я не понимаю, почему я должен использовать JQuery для этого.
Maarten 19 окт. 2013, в 18:03

Ещё вопросы

Какая? setContent является глобальной функцией.
Эти 4 строки javascript запускаются быстрее, чем за 1 мс, как насчет setTimeout?
Да, setContent() является глобальной функцией. Если вы не видите смысла, сделайте это: 1) var foo = document.getElementById("content"); alert(foo); запустите этот код за пределами window.onload . Это предупредит undefined даже если элемент существует. Теперь поместите то же самое в window.onload = function(){..Here..} и вы увидите разницу
О, теперь я понимаю, что вы имеете в виду. Но моя проблема не в том, что DOM еще не загружен, а в том, что JS работает так быстро, что я не могу «сбросить» анимацию непрозрачности.
Эта функция не заставит мою анимацию работать, а также я не понимаю, почему я должен использовать JQuery для этого.

Maarten · Accepted Answer · 2013-10-19T13-28-00.000Z

Как насчет использования анимаций?

#content {
    padding-left: 32px;
    padding-right: 32px;
    animation: fadein 0.5s;
    -moz-animation: fadein 0.5s; 
    -webkit-animation: fadein 0.5s; 
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { 
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { 
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}