由于 CSS 过渡持续时间，在 jQuery 中隐藏和淡入一个元素表现得很奇怪

Question

我有一个元素（圆圈）要添加到页面并淡入。我正在使用以下 jQuery 来执行此操作：

var circle = $("<div id=\"circle\"></div>");
circle.hide();
circle.appendTo("body");
circle.fadeIn(1000);

最初这工作正常。然后我将一些 CSS 添加到圆圈以在将鼠标悬停或单击时更改其大小，并通过将 transition-duration: 0.2s; 添加到圆圈来制作此动画。

现在，当淡入发生时，圆圈立即出现，淡出一点，然后淡入；大概是由于 circle.hide(); 使用了它的过渡持续时间。 JSFiddle demonstrating the problem.

有没有简单的方法可以：

添加最初隐藏的圆形元素并将其淡入，或者
在 jQuery 中处理圆圈大小的动画，而不是使用 CSS

Answer 1

尝试在该函数的最后添加一个短超时，然后在圆圈中添加一个 class。 class 将具有所有 CSS 转换。所以没有任何干扰的机会，因为在初始淡入完成之前，圆圈不会有任何过渡。

      setTimeout(function() {
         circle.addClass('active');
      }, 300);

FIDDLE

Answer 2

不确定这是最好和最简单的方法，但无需更改任何其他内容即可工作：您可以从 css 中删除 transition-duration，然后将其设置为 jquery fadeIn方法完成

var circle = $("<div id=\"circle\"></div>");
circle.hide();
circle.appendTo("body");
circle.fadeIn(1000, function() {
    circle.css('transition-duration', '0.2s');
});

Answer 3

您可以在 CSS transition 属性.
中限制更多目前，仅设置 transition-duration: 0.2s 就像设置 transition: all .2s 0s ease.

您可以选择只为您需要的 properties 设置动画：

var circle = $("<div id=\"circle\"></div>");
circle.hide();
circle.appendTo("body");
circle.fadeIn(1000);

html {
 background-color: #000;
}
#circle {
 border-radius: 50px;
 width: 100px;
 height: 100px;
 background-color: #fff;
  /* change just this line */
    transition: width .2s, height .2s, border-radius .2s;
 cursor: pointer;
 position: absolute;
 margin: auto;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
}
#circle:hover {
 border-radius: 60px;
 width: 120px;
 height: 120px;
}
#circle:active {
 border-radius: 55px;
 width: 110px;
 height: 110px;
}

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

由于 CSS 过渡持续时间，在 jQuery 中隐藏和淡入一个元素表现得很奇怪

Hiding and fading in an element in jQuery behaving weirdly due to CSS transition duration

jquery

fadein

css-animations