当通过JavaScript分配时，CSS转换不起作用 [英] CSS transitions do not work when assigned trough JavaScript

问题描述

我遇到了一些头痛，试图通过JavaScript将CSS3过渡应用到幻灯片。

I'm having some major headache trying to apply CSS3 transitions to a slideshow trough JavaScript.

基本上，JavaScript获取幻灯片中的所有幻灯片，并应用CSS类到正确的元素，以给出一个很好的动画效果，如果没有CSS3过渡支持它将只应用样式没有过渡。

Basically the JavaScript gets all of the slides in the slideshow and applies CSS classes to the correct elements to give a nice animated effect, if there is no CSS3 transitions support it will just apply the styles without a transition.

现在，问题。所有工作按预期，所有幻灯片获得正确的样式，代码运行没有错误（到目前为止）。但指定的转换不工作，即使正确的样式应用。此外，当我通过检查器应用自己的样式和转换工作。

Now, my 'little' problem. All works as expected, all slides get the correct styles, the code runs without bugs (so far). But the specified transitions do not work, even though the correct styles where applied. Also, styles and transitions work when I apply them myself trough the inspector.

因为我自己找不到一个逻辑的解释，我认为有人在这里可以回答它，漂亮请？

Since I couldn't find a logical explanation myself I thought someone here could answer it, pretty please?

我把一个例子说明了现在的代码： http： //g2f.nl/38rvma
或使用JSfiddle（无图片）： http://jsfiddle.net/ 5RgGV / 1 /

I've put together a little example of what the code is right now: http://g2f.nl/38rvma Or use JSfiddle (no images): http://jsfiddle.net/5RgGV/1/

推荐答案

使转换 ，三件事情必须发生。

To make transition work, three things have to happen.

1. 元素必须显式定义属性，在这种情况下： opacity：0;


2. 元素必须定义转换： transition：opacity 2s;


3. 必须设置新属性： opacity：1

1. the element has to have the property explicitly defined, in this case: opacity: 0;
2. the element must have the transition defined: transition: opacity 2s;
3. the new property must be set: opacity: 1

动态分配1和2，就像你在你的例子中，需要在3之前有一个延迟，所以浏览器可以处理请求。当你调试它的原因是，你正在创建这个延迟通过它，它给浏览器的时间来处理。给予延迟分配 .target-fadein ：

If you are assigning 1 and 2 dynamically, like you are in your example, there needs to be a delay before 3 so the browser can process the request. The reason it works when you are debugging it is that you are creating this delay by stepping through it, giving the browser time to process. Give a delay to assigning .target-fadein:

window.setTimeout( function() { slides[targetIndex].className += " target-fadein"; }, 100 ); 

或放置 .target-fadein-begin

添加转换到元素

演示： http： //jsfiddle.net/ThinkingStiff/QNnnQ/

HTML：

<div id="fade1" class="fadeable">fade 1 - works</div>
<div id="fade2">fade 2 - doesn't work</div>
<div id="fade3">fade 3 - works</div>

CSS：

.fadeable {
    opacity: 0;
}

.fade-in {
    opacity: 1;
    transition:             opacity 2s;
        -moz-transition:    opacity 2s;
        -ms-transition:     opacity 2s;
        -o-transition:      opacity 2s;
        -webkit-transition: opacity 2s;
}

脚本：

//works
document.getElementById( 'fade1' ).className += ' fade-in';

//doesn't work
document.getElementById( 'fade2' ).className = 'fadeable';
document.getElementById( 'fade2' ).className += ' fade-in';

//works
document.getElementById( 'fade3' ).className = 'fadeable';
window.setTimeout( function() {

    document.getElementById( 'fade3' ).className += ' fade-in';

}, 100);

这篇关于当通过JavaScript分配时，CSS转换不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！