用 JS 添加一个 css 过渡，并同时更改作为过渡主题的属性，不起作用答案

【问题标题】：add a css transition with JS, and change in same time the property which is subject of the transition, doesn't work用 JS 添加一个 css 过渡，并同时更改作为过渡主题的属性，不起作用
【发布时间】：2014-12-07 06:26:01
【问题描述】：

我想在 JS 中动态地在 height 属性上添加一个过渡，并同时更改高度属性（以操纵过渡），例如：

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

高度改变正确，但没有发生过渡。如果我重新改变高度，这次过渡是有效的。

那么为什么不第一次工作呢？我该怎么做？

编辑

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

【问题讨论】：

我认为过渡是从当前高度的缓存值开始的......而不是描述什么不起作用，如果你解释你的意思 “操纵过渡” i> - 可能还有其他方式。
我尝试分两次进行：$('#foo').css({transition: 'height 5s linear'}); 和 $('#foo').css({height: '100%'});，但结果相同
我不认为在过渡结束之前更改它会重新启动它。就像我说的，如果你解释你正在尝试做什么而不是说什么不起作用，你可能会得到帮助......
我想用JS触发一个动画。什么不清楚？过渡不在 css 中，因为在 JS 代码中动态变化。

标签： jquery css css-transitions

【解决方案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 值设置为该高度作为起点。例如#foo{height: 60px;} 动画开始前。在这种情况下，动画的关键帧将如下所示：

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

    100% {
        height: 100%;
    }
}

否则，您将获得jump 效果，其中元素的高度将从60px 变为0 (animation start point)，然后变为100%。

但是，如果元素的高度事先是0 例如#foo{height: 0;}, 您可以将0 设置为动画的起点。

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

    100% {
        height: 100%;
    }
}

最后的解决方案：好的，现在我明白了您的问题，但您无法使用 .css() 解决它。我的建议是，不要在load 上创建和附加#foo 元素，而是直接在您的HTML 中创建它。因为它的初始height 被CSS 定义为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/

伙计，说一个长答案。

【讨论】：

不，animate 功能很糟糕，我的应用只使用 CSS3 ;)
我又给了你一个解决方案；）
我不知道“预先设置为0”，在CSS中可以吗？
是的，例如像这样：#foo{height: 0} 或 #foo{height: 60px} 或 #foo{height: valueThatYouWant}。我几乎可以闻到这里的拖钓。
我在原帖中解释了那部分。

【解决方案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 of 0 上工作：http://jsfiddle.net/31d57n55/8/），因为它让 DOM 有时间准备好...

解决方案：可能有 2 次破解，请查看 CSS Transition Not Firing

【讨论】：