如果应用了 css 转换，为什么动画回调函数会立即触发？

Question

由于我在 css 中使用过渡，代码会立即触发回调函数并忽略 linear 缓动类型并使用默认的 swing 缓动。

为什么会发生这种情况，有没有办法让动画功能在过渡时正常工作？我需要过渡，因为如果我尝试将 div 动画化回其原始宽度，由于存在多个 div 和 [=29=，它会产生一点白色 space ] 动画不会运行与过渡 speed/time 相同。

var width = 500;
$('.start-animation').on('click', () => {
  $('.test').animate({
    'width': `${width}px`
  }, 300, 'linear', () => {
    $('.content').slideDown(300);
  });
});

$('.reset-animation').on('click', () => {
  $('.content').hide();
  $('.test').removeAttr('style');
});

.test {
  width: 120px;
  padding: 20px;
  background: grey;
  transition: width 0.3s ease-in-out;
}

.content {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis nulla at maximus tempor. Pellentesque pellentesque tincidunt diam, sit amet sagittis risus ultrices sed. In sed massa libero. Vestibulum in lectus in metus vulputate viverra non eget
    mi. Integer vel nisl tortor. Fusce luctus, neque at ultrices porta, ante odio varius mauris, quis molestie libero est sit amet arcu. Duis gravida risus at sem posuere iaculis. Aliquam erat volutpat. Quisque lectus enim, aliquam in volutpat posuere,
    bibendum nec augue. Cras pretium vel sem vitae tristique. Etiam nec finibus lorem, ac scelerisque felis. Nam eu molestie est, at commodo nisi. Duis sagittis, diam ac ornare posuere, leo justo finibus justo, ac tincidunt lorem sapien eget dui. Curabitur
    rutrum porta lorem, non tempor elit accumsan at. Curabitur mattis nulla sed mi congue, vitae ullamcorper nisi mattis. Donec auctor velit a laoreet rutrum. Donec a nisi leo. Sed sed dui felis.
  </div>
</div>


<div class="start-animation">
  start-animation
</div>
<div class="reset-animation">
  reset-animation
</div>

Answer 1

删除运行时的过渡 animate() 功能以避免这种不良影响。 animate() 将更改宽度值，这些更改将获得过渡效果。

var width = 500;
$('.start-animation').on('click', () => {
  $('.test').removeClass('transition').animate({
    'width': `${width}px`
  }, 300, 'linear', () => {
    $('.content').slideDown(300);
  });
});

$('.reset-animation').on('click', () => {
  $('.content').hide();
  $('.test').addClass('transition').removeAttr('style');
});

.test {
  width: 120px;
  padding: 20px;
  background: grey;
}
.transition {
  transition: width 0.3s ease-in-out;
}

.content {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis nulla at maximus tempor. Pellentesque pellentesque tincidunt diam, sit amet sagittis risus ultrices sed. In sed massa libero. Vestibulum in lectus in metus vulputate viverra non eget
    mi. Integer vel nisl tortor. Fusce luctus, neque at ultrices porta, ante odio varius mauris, quis molestie libero est sit amet arcu. Duis gravida risus at sem posuere iaculis. Aliquam erat volutpat. Quisque lectus enim, aliquam in volutpat posuere,
    bibendum nec augue. Cras pretium vel sem vitae tristique. Etiam nec finibus lorem, ac scelerisque felis. Nam eu molestie est, at commodo nisi. Duis sagittis, diam ac ornare posuere, leo justo finibus justo, ac tincidunt lorem sapien eget dui. Curabitur
    rutrum porta lorem, non tempor elit accumsan at. Curabitur mattis nulla sed mi congue, vitae ullamcorper nisi mattis. Donec auctor velit a laoreet rutrum. Donec a nisi leo. Sed sed dui felis.
  </div>
</div>


<div class="start-animation">
  start-animation
</div>
<div class="reset-animation">
  reset-animation
</div>

为了更好地说明问题，增加转换的值，您会注意到 animate() 什么都不做：

var width = 500;
$('.start-animation').on('click', () => {
  $('.test').animate({
    'width': `${width}px`
  }, 300, 'linear', () => {
    $('.content').slideDown(300);
  });
});

$('.reset-animation').on('click', () => {
  $('.content').hide();
  $('.test').removeAttr('style');
});

.test {
  width: 120px;
  padding: 20px;
  background: grey;
  transition: width 30s ease-in-out;
}

.content {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis nulla at maximus tempor. Pellentesque pellentesque tincidunt diam, sit amet sagittis risus ultrices sed. In sed massa libero. Vestibulum in lectus in metus vulputate viverra non eget
    mi. Integer vel nisl tortor. Fusce luctus, neque at ultrices porta, ante odio varius mauris, quis molestie libero est sit amet arcu. Duis gravida risus at sem posuere iaculis. Aliquam erat volutpat. Quisque lectus enim, aliquam in volutpat posuere,
    bibendum nec augue. Cras pretium vel sem vitae tristique. Etiam nec finibus lorem, ac scelerisque felis. Nam eu molestie est, at commodo nisi. Duis sagittis, diam ac ornare posuere, leo justo finibus justo, ac tincidunt lorem sapien eget dui. Curabitur
    rutrum porta lorem, non tempor elit accumsan at. Curabitur mattis nulla sed mi congue, vitae ullamcorper nisi mattis. Donec auctor velit a laoreet rutrum. Donec a nisi leo. Sed sed dui felis.
  </div>
</div>


<div class="start-animation">
  start-animation
</div>
<div class="reset-animation">
  reset-animation
</div>

如果应用了 css 转换，为什么动画回调函数会立即触发？

Why does animate callback function fire immediately if there is a css transition applied?

css

jquery

css-transitions

jquery-animate