相关疑难解决方法(0)

我想使用CSS3颜色过渡将高亮淡化效果(黄色到透明)应用于使用JQuery附加到标记的新元素.

CSS

#content div {
    background-color:transparent;
    -moz-transition:background-color 2s;
    -webkit-transition:background-color 2s;
    -o-transition:background-color 2s;
    transition:background-color 2s;
}

#content div.new {
    background-color:yellow;
}

HTML

<div id="content"></div>
<a id="add-element" href="#">add new element</a>

JS

$('#add-element').click(function() {
    var newElement = $('<div class="new">new element</div>');
    $('#content').append(newElement);
    newElement.removeClass('new');
});

单击链接时,将创建新元素.它的类是"新"(背景颜色为黄色),它附加到HTML标记.我应该能够立即删除"新"类以触发背景颜色过渡到透明(或任何其他颜色).我显然做错了,因为新元素的背景颜色立即显示为透明,没有过渡效果.我知道我可以在JQuery UI中执行此操作,但我想使用CSS3过渡.

jsfiddle在这里:

http://jsfiddle.net/paulaner/fvv5q/

正如标题所暗示的那样,是否有正确的方法来设置一些初始CSS属性(或类)并告诉浏览器将这些转换为另一个值？

例如(小提琴):

var el = document.querySelector('div'),
    st = el.style;
st.opacity = 0;
st.transition = 'opacity 2s';
st.opacity = 1;

这不会为Chrome 29/Firefox 23中元素的不透明度设置动画.这是因为(来源):

[...]你会发现,如果你同时应用两组属性,那么浏览器会尝试优化属性更改,忽略初始属性并阻止转换.在幕后,浏览器在绘制之前批量处理属性更改,虽然通常会加快渲染速度,但有时会产生不利影响.

解决方案是在应用两组属性之间强制重绘.这样做的一个简单方法就是访问DOM元素的offsetHeight属性[...]

事实上,黑客确实可以在当前的Chrome/Firefox版本中运行.更新了代码(小提琴 - Run打开小提琴后点击再次运行动画):

var el = document.querySelector('div'),
    st = el.style;
st.opacity = 0;
el.offsetHeight; //force a redraw
st.transition = 'opacity 2s';
st.opacity = 1;

但是,这是相当hackish,并报告在某些Android设备上不起作用.

另一个答案建议使用,setTimeout以便浏览器有时间执行重绘,但它也失败了,因为我们不知道重绘需要多长时间.猜测一个相当大的毫秒数(30-100？)以确保重绘意味着牺牲性能,不必要地闲置,希望浏览器在那么短的时间内执行一些魔术.

通过测试,我发现了另一种解决方案,它在最新的Chrome上运行良好,使用requestAnimationFrame(小提琴):

var el = document.querySelector('div'),
    st = el.style;
st.opacity = 0;
requestAnimationFrame(function() {
    st.transition …

我有一个函数,使用jQuery将html加载到一个表中,然后使用回调向其中一行添加一个类.该功能由页面上的各种UI驱动事件触发.我也有一个css转换规则,所以颜色应淡入(transition: background-color 1000ms linear).该函数如下所示:

function load_tbody(row_id) {
    $('tbody').load("load_tbody.php", function() {
        $(row_id).addClass('green');
    });
}

加载html后,成功添加类并将行颜色设置为绿色.但是,我的css转换规则似乎被忽略了.

当我添加一点延迟,甚至10毫秒时,它工作正常:

function load_tbody(row_id) {
    $('tbody').load("load_tbody.php", function() {
        setTimeout(function() {
            $(row_id).addClass('green');
        }, 10);
    });
}

状态的jQuery文档.load():

如果提供"完整"回调,则在后处理和执行HTML插入之后执行.

对我而言,这将表明新元素已加载到dom中,并且已应用现有样式并且可以进行操作.为什么转换在第一个示例中失败但在第二个示例中成功？

这是一个功能齐全的示例页面,用于演示相关行为:

http://so-37035335.dev.zuma-design.com/

虽然上面的例子从cdn链接了jQuery 2.2.3版,但实际的页面使用的是版本1.7.1.两个版本都可以观察到相同的行为.

更新:

在考虑了下面提供的一些评论和答案之后,我偶然发现了一些令人困惑的事情.用户@gdyrrahitis提出了一个建议,引导我这样做:

function tbody_fade(row_id) {
    $('tbody').load("load_tbody.php", function() {
        $('tbody').fadeIn(0, function() {
          $(this).find(row_id).addClass('green');
        });
    });
}

在fadeIn()回调中添加类可以工作,即使持续时间为0ms.因此,这让我想知道......如果元素是理论上反正有什么背景颜色做浏览器认为它之前,我补充一点类.所以我记录了background-color:

console.log($(row_id).css('background-color'));

你知道吗？只需获得背景色的颜色就可以了:

function tbody_get_style(row_id) {
    $('tbody').load("load_tbody.php", function() {
        $(row_id).css('background-color');
        $(row_id).addClass('green');
    });
}

只是添加$(row_id).css('background-color');似乎什么都不做的行会导致过渡效果起作用.这是一个演示:

http://so-37035335-b.dev.zuma-design.com/ …