适当的JavaScript延迟来触发CSS

Appropriate JavaScript delay to trigger CSS?

本文关键字：CSS 延迟 JavaScript      更新时间：2023-09-26

假设我有一些CSS所以#joe { transition: opacity 500ms; opacity: 0; }

然后我有JavaScript，所以当你点击页面时，它会添加div，然后将opacity动画到= 1。

document.body.onclick = function () {
  var joe = document.createElement('div')
  joe.innerHTML = 'yo!'
  joe.id = 'joe'
  document.body.appendChild(joe)
  joe.style.opacity = 1
}

它没有动画。(我猜是因为CSS过渡认为它是一个"初始页面加载")

但是如果你添加了一个timeout

document.body.onclick = function () {
  var joe = document.createElement('div')
  joe.innerHTML = 'yo!'
  joe.id = 'joe'
  document.body.appendChild(joe)
  setTimeout(function () {
    joe.style.opacity = 1
  }, 100)
}

然后动画工作。

但是在某些情况下，即使是100ms的延迟也会对页面的响应性产生明显的影响。而且，不幸的是，将超时设置为1ms不起作用。

那么，超时应该是多少?我希望有动画，大部分时间跨主要浏览器，但我不想提高超时没有很好的理由。

我对jQuery动画不感兴趣，因为根据我的经验，它比CSS转换效率低，而且不能很好地同步多个动画。如果有另一种JavaScript实现胜过CSS，我愿意接受建议，但不要让它阻止你回答这个问题。

如果有一个initial动画的CSS，那将是很好的知道…

但是我真正想知道的是超时应该如何设置，因为有时我动画left或width，我不想在开始和结束代码到CSS，当我需要使用JavaScript来动态计算这些值

可以不使用window.getComputedStyle()来实现setTimeout。

基本思想是:

joe.style.opacity = 0; //unnecessary in this case, set by css class   
window.getComputedStyle(joe).getPropertyValue("width");
joe.style.opacity = 1;

这里是jsfiddle: http://jsfiddle.net/4Vy9n/2/

非常简单，这是一个纯CSS解决方案:

http://jsfiddle.net/X7Zg5/7/

CSS: 

.joe {
    font-size: 100px;
    -webkit-animation-duration: 500ms;
    -webkit-animation-name: fadeIn;
    -moz-animation-duration: 500ms;
    -moz-animation-name: fadeIn;
    -o-animation-duration: 500ms;
    -o-animation-name: fadeIn;
    animation-duration: 500ms;
    animation-name: fadeIn;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

JS: 

document.documentElement.onclick = function () {
    var joe = document.createElement('div');
    joe.innerHTML = 'yo!';
    joe.className = 'joe';
    document.body.appendChild(joe);
}
相关文章：