使用 JS 添加一个 CSS 过渡，并同时更改作为转换主题的属性不起作用

Question

我想在JS中动态添加高度属性的转换，并同时更改高度poperty（以操纵转换），如：

$('#foo').css({transition: 'height 5s linear', height: '100%'});

高度变化正确，但没有发生转换。如果我重新改变高度，这一次，转换是有效的。

为什么第一次不起作用呢？我该怎么做？

编辑

我发现了真正的问题：我在JS中创建了DOM元素#foo，就在尝试更改她的CSS之前：http://jsfiddle.net/31d57n55/2/如果您取消对第2行的注释，它将起作用，因为它让新DOM的时间可以随时使用。。。那么，我如何才能知道DOM的这个新节点何时准备好呢？

Answer 1

尝试使用.animate（）而不是.css（）.

$('#foo').animate({'height': '100%'}, 500);

如果你想包括一些easing效果，你还需要包括jQueryUI效果，然后代码是：

$('#foo').animate({'height': '100%'}, {easing: 'easeInOutCirc', duration: 500});

编辑：好的，然后为元素创建一个类，比如.in-transition，它将是：

.in-transition{
    -webkit-animation: animateHeight 0.5s linear forwards;
    -moz-animation: animateHeight 0.5s linear forwards;
    -ms-animation: animateHeight 0.5s linear forwards;
    -o-animation: animateHeight 0.5s linear forwards;
    animation: animateHeight 0.5s linear forwards;
}
@keyframes animateHeight {
    0% {
        height: (enterCurrentHeight || set it to 0 beforehand);
    }
    100% {
        height: 100%;
    }
}
@-webkit-keyframes animateHeight {
    0% {
        height: (enterCurrentHeight || set it to 0 beforehand);
    }
    100% {
        height: 100%;
    }
}

然后你只添加/删除这个类：

$('#foo').on('click', function(){
    var this = $(this);
    this.addClass('in-transition'); //or use toggleClass
});

(enterCurrentHeight || set it to 0 beforehand):的解释

如果要开始动画时#foo元素已经有一定的高度，则需要将动画的height值设置为该高度作为起点。例如在动画开始之前的CCD_ 6。在这种情况下，动画的关键帧将如下所示：

@keyframes animateHeight {
    0% {
        height: 60px;
    }
    100% {
        height: 100%;
    }
}

否则就会产生jump效果，其中元素的高度将从60px到0 (animation start point)，然后到100%。

但是，如果元素的高度预先为0例如CCD_ 12，您可以将0设置为动画的起点。

@keyframes animateHeight {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}

最后一个解决方案：好的，现在我知道你的问题了，但你不能用.css（）来解决它。我的建议是，不要在load上创建并附加#foo元素，而是直接在你的HTML中创建它。由于CSS将其初始height定义为0，因此不会看到它。那么您只需要在load上将.in-transition类添加到它中。

Notice: #(id)选择器胜过.(class)选择器，因此需要将.in-transition附加到#foo，例如#foo.in-transition，非常重要

HTML:

<div id="foo"></div>

CSS：

#foo{
    height: 0;
    width: 100px;
    background: red;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
}
#foo.in-transition{
    height: 100px;
}

JS:

(function(){
    var $foo = $('#foo');
    $foo.addClass('in-transition');
} 

工作示例：http://jsfiddle.net/31d57n55/5/

伙计，谈谈长话短说吧。

Answer 2

问题是：该追加DOM元素了(http://jsfiddle.net/31d57n55/2/)

$('<div id="foo"></div>').appendTo('body') //console.log($('#foo')); $('#foo').css({height: '100px', transition: 'height 5s linear'}); 如果取消对第2行的注释，它将起作用（在FF上，在chrome setTimeout为0时起作用：http://jsfiddle.net/31d57n55/8/)，因为它让DOM的时间准备好了。。。

解决方案：2个可能的破解，看看CSS转换不触发