为什么在应用一个类使我的转换生效时需要setTimeout？ [英] Why is setTimeout needed when applying a class for my transition to take effect?

问题描述

我有一个应用了过渡的元素。我想通过向元素添加一个类来控制转换，从而导致转换运行。但是，如果我太快地应用类，过渡效果不会发生。

我假设这是因为 .shown 在同一事件循环中放置在div上，因为 .foo 放置在DOM上。这使得浏览器认为它是用 opacity：1 创建的，因此没有转换。

我想知道是否有一个优雅的解决方案，而不是在setTimeout中包装我的类。

这里是一个代码片段：

  .foo {opacity：0; transition：opacity 5s ease; width：200px; height：200px;背景颜色：红色;}。foo.shown {opacity：1;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>  
 p> 

解决方案

实际上， ，但是关于如何渲染元素。

CSS转换只会在元素使用属性值呈现时出现，然后此属性才会更改。
但是一旦你追加元素，它并不意味着它被渲染。只需添加一个 setTimeout 是不够的。思考它可能为您工作，在一些浏览器版本它不会工作！ （大部分是Firefox）

这是关于元素的渲染时间。而不是 setTimeout ，您可以通过请求一个视觉样式属性，然后更改类强制DOM渲染：

  var foo = $（'< div>'，{'class'：'foo'}）; foo.appendTo（$（'body'）） .var x = foo [0] .clientHeight; //它的工作原理，没有setTimeoutfoo.addClass（'shown'）;  

  .foo {opacity：0; transition：opacity 5s ease; width：200px; height：200px;背景颜色：红色;}。foo.shown {opacity：1;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>  

I have an element with a transition applied to it. I want to control the transition by adding a class to the element which causes the transition to run. However, if I apply the class too quickly, the transition effect does not take place.

I'm assuming this is because the .shown is placed onto the div during the same event loop as when .foo is placed onto the DOM. This tricks the browser into thinking that it was created with opacity: 1 so no transition is put into place.

I'm wondering if there is an elegant solution to this rather than wrapping my class in a setTimeout.

Here's a snippet:

var foo = $('<div>', {
    'class': 'foo'
});

foo.appendTo($('body'));

setTimeout(function(){
    foo.addClass('shown');
});

.foo {
    opacity: 0;
    transition: opacity 5s ease;
    width: 200px;
    height: 200px;
    background-color: red;
}

.foo.shown {
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

解决方案

Actually, the point is not about the setTimeout, but about how the element is rendered.

The CSS transition will only appear if the element is rendered with a property value, and then this property is changed. But once you append the element, it does not mean that it was rendered. Simply adding a setTimeout is not enough. Thought it may work for you, in some browser versions it won't work! (Mostly Firefox)

The point is about the element's render time. Instead of setTimeout, you can force a DOM render by requesting a visual style property, and then changing the class:

var foo = $('<div>', {
    'class': 'foo'
});

foo.appendTo($('body'));

//Here I request a visual render.
var x = foo[0].clientHeight;

//And it works, without setTimeout
foo.addClass('shown');

.foo {
    opacity: 0;
    transition: opacity 5s ease;
    width: 200px;
    height: 200px;
    background-color: red;
}

.foo.shown {
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这篇关于为什么在应用一个类使我的转换生效时需要setTimeout？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！