新元素的CSS过渡
我找不到在新创建的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/上看到的那样，单击该元素会立即显示。
如果我尝试在a中设置类，timeout()我 通常会
找到结果，但是对我来说，这似乎更像是javascript和CSS引擎之间的竞赛。有没有要听的特定事件？我尝试使用，document.body.addEventListener('DOMNodeInserted', ...)但无法正常工作。
如何在新创建的元素上应用CSS过渡？
问题答案：
requestAnimationFrame()似乎可以跨Firefox，Chrome和Safari使用。一个更可靠，更合理的解决方案setTimeout()。对于较旧的浏览器（IE8），将需要使用Polyfill（自然，过渡不会发生，但是CSS仍会更改）。
-
主要内容：1. ::after,2. ::before,3. ::first-letter,4. ::first-line,5. ::selection,6. ::placeholder伪元素是一个附加在选择器末尾的关键词，通过伪元素您不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。例如通过伪元素您可以设置段落中第一个字母的样式，或者在元素之前、之后插入一些内容等等。 在 CSS1 和 CSS2 中，伪元素的使用与伪类相同，都是使一个冒号 与选择器相连。但在 C
-
CSS伪元素是用来添加一些选择器的特殊效果。 语法 伪元素的语法：selector:pseudo-element {property:value;} CSS类也可以使用伪元素：selector.class:pseudo-element {property:value;} :first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式。 在下面的例子中，浏览器会根据 "
-
问题内容： 正如这个问题所观察到的，新添加的元素上的CSS过渡立即被忽略了-过渡的结束状态立即被呈现。 例如，给定此CSS（此处省略前缀）： 此元素的不透明度将立即设置为1： 我已经看到了触发过渡以获得预期行为的几种方法： 相同的方法适用于原始JS DOM操作-这不是jQuery特定的行为。 编辑-我正在使用Chrome 35。 为什么忽略附加元素上的即时CSS动画？ 这些方法如何以及为什么起作用
-
问题内容： 我的页面布局涉及很多绝对位置和z索引位置，因此有很多元素相互重叠。 元素之一仅包含文本，它悬停在许多其他事物之上。 在该元素下方，有几个应用了CSS悬停伪类的元素。 当鼠标经过包含文本的元素时，我想以某种方式使下面的Element响应鼠标的存在并激活伪类样式。 有没有什么样式的元素，以便它允许悬停通过它传递给下面的任何元素？ 使用JavaScript并不是很难，但是为了使事情尽可能简单
-
通常我们可能会认为 HTML 网页是个二维的平面，因为页面中的文本、图像或者其它元素都是按照一定顺序排列在页面上的，每个元素之间都有一定的间隙，不会重叠。然而，实际的网页其实是三维的，元素之间可能会发生堆叠（重叠），您可以通过 CSS 中的 z-index 属性来设置元素的堆叠顺序，如下图所示： 图：元素堆叠演示 每个元素都有一个默认的 z-index 属性，将 z-index 属性与 posit
-
问题内容： 我经常在网上找到漂亮的样式。要复制DOM元素的CSS，我使用Google Chrome开发者工具检查该元素，查看各种CSS属性，然后将其手动复制到我自己的样式表中。 是否可以轻松导出给定DOM元素的所有CSS属性？ 问题答案： 这是一种方法的代码，该方法应返回一个CSS字符串，包括给定元素的所有内联和外部样式，默认值 除外 （这是主要困难）。 例如： 由于您使用的是Chrome，因此我