我有一个DOM元素,应用了以下一些/所有效果:
#elem {
-webkit-transition: height 0.4s ease;
-moz-transition: height 0.4s ease;
-o-transition: height 0.4s ease;
transition: height 0.4s ease;
}
我正在编写一个调整此元素大小的jQuery插件,我需要暂时禁用这些效果,以便我可以顺利调整大小.
暂时禁用这些效果(然后重新启用它们)的最优雅方法是什么,因为它们可能是从父母那里应用的,或者可能根本不适用.
我找不到在新创建的dom元素上使用css过渡的方法.
假设我有一个空的html文档.
<body>
<p><a href="#" onclick="return f();">click</a></p>
</body>
我也有这个CSS
#id {
-moz-transition-property: opacity;
-moz-transition-duration: 5s;
opacity: 0;
}
#id.class {
opacity: 1;
}
而这个js
function f() {
var a = document.createElement('a');
a.id = 'id';
a.text = ' fading in?';
document.getElementsByTagName('p')[0].appendChild(a);
// at this point I expect the span element to be with opacity=0
a.className = 'class';
// now I expect the css transition to go and "fade in" the a
return false;
}
但是,正如您在http://jsfiddle.net/gwxkW/1/上看到的那样,当您单击该元素时,会立即显示.
如果我尝试在一个timeout()i中设置类经常 …
我正在尝试通过JavaScript将CSS3过渡应用于幻灯片时遇到一些重大问题.
基本上,JavaScript获取幻灯片中的所有幻灯片,并将CSS类应用于正确的元素以提供良好的动画效果,如果没有CSS3过渡支持,它将只应用样式而不进行过渡.
现在,我的'小'问题.所有工作都按预期工作,所有幻灯片都获得正确的样式,代码运行没有错误(到目前为止).但是指定的转换不起作用,即使应用了正确的样式.此外,当我通过检查器自己应用样式和过渡时,样式和过渡也会起作用.
由于我自己找不到合乎逻辑的解释,我以为有人可以回答这个问题,好吗？
我已经汇总了一个代码现在的例子:http: //g2f.nl/38rvma或者使用JSfiddle(没有图片):http://jsfiddle.net/5RgGV/1/
考虑以下 HTML 文档：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
background: crimson;
}
div {
transition: opacity 5s;
font-size: 4em;
opacity: 0;
}
.loaded div {
opacity: 1;
}
</style>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('body').className += "loaded";
})
</script>
</head>
<body id="body">
<div>
TEST
</div>
</body>
</html>
div 的不透明度应该设置为 0，并且不透明度的过渡时间为 5 秒。
当 DOM 加载时，主体会被赋予一个将 div 不透明度设置为 1 的类。
我预计 div 不透明度会在 5 秒内从 0 转变为 1。但由于某种原因，它立即发生。
如果我使用 setTimemout，每个都会按预期工作：
<!DOCTYPE html>
<html lang="en">
<head> …