Question

我有这个代码将外部本地页面加载到div：

function load(url) {

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


}

我怎样才能让它淡出而不只是出现？我更喜欢它是纯粹的javascript

Answer 1

或者，如果你不能使用jQuery在css中创建动画类：

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

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

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

然后在js中使用此代码：

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

您需要做的最后一件事是添加到js-fade和淡入淡入的myDiv类。上述代码是通用的，因此可以根据您的需求进行调整

Answer 2

我在this answer中找到了一个很好的fadeIn函数，并将其应用于你的加载函数。

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 3

最简单的方法是添加到你的html jQuery：

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

然后在你的js文件中使用myDiv上的.fadeIn（）方法。记得在链接.js文件之前链接jQuery

Javascript将fadeIn添加到加载Div

3 个答案: