Javascript Добавить FadeIn к загрузке Div

Question

У меня есть этот код, который загружает внешнюю локальную страницу в DIV:

function load(url) { 

    document.getElementById("myDiv").innerHTML='<object type="text/html" data="'+url+'"></object>'; 
    return false; 


} 

Как я могу сделать это FadeIn вместо того, чтобы просто появляться? Я предпочел бы, если это был чистый Javascript

Answer 1

Я нашел хорошую функцию fadeIn в this answer и применил ее к вашей функции загрузки.

Fiddle

function load(url) { 
    var myDiv = document.getElementById("myDiv"); 
    myDiv.innerHTML='<object type="text/html" data="'+url+'"></object>'; 
    fadeIn(myDiv); 
    return false; 
} 

function fadeIn(el) { 
    el.style.opacity = 0; 
    var tick = function() { 
    el.style.opacity = +el.style.opacity + 0.01; 
    if (+el.style.opacity < 1) { 
     (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16) 
    } 
    }; 
    tick(); 
} 

load('foo'); 

Answer 2

Самый простой способ сделать это, чтобы добавить к вашему HTML JQuery:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 

, а затем в вашем использовании JS файл метода .fadeIn() на myDiv. Не забудьте связать JQuery, прежде чем связать .js файл

Answer 3

Или, если вы не можете использовать JQuery создавать классы одушевленные в CSS:

@keyframes fadeIn { 
to { 
    opacity: 1; 
    } 
} 

.fade-in { 
    opacity: 0; 
animation: fadeIn .5s ease-in 1 forwards; 
} 

.is-paused { 
    animation-play-state: paused; 
} 

, а затем использовать этот код в ЯШ:

var el = document.querySelector('.js-fade'); 
if (el.classList.contains('is-paused')){ 
el.classList.remove('is-paused'); 
} 

Последнее, что вам нужно сделать, это добавить в классы myDiv js-fade и fade-in-приостановить. Вышеупомянутый код является qute общим, поэтому приспосабливаем его к вашим потребностям