由于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证明了问题。

有一种简单的方法：

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

Answer 1

不确定这是最好和简单的方法，但是可以无需更改其他任何方法：您可以从CSS中删除transition-duration，然后在fadeIn方法完成时用jQuery将其设置为

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

Answer 2

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

您可以选择仅动画所需的属性：

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>

Answer 3

尝试在该功能的末尾添加短时间，然后将类添加到圆圈中。该类将具有所有CSS过渡。因此，没有任何干扰的机会，因为在完成初始Fadein之前，该圆圈不会有任何过渡。

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

小提琴