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

Question

当我在 css 中使用过渡时，代码会立即触发回调函数并忽略 linearease 类型并使用默认的 swingease。

为什么会发生这种情况？有没有办法让动画功能与过渡一起正常工作？我需要过渡，因为如果我尝试将 div 动画化回其原始宽度，由于有多个 div 并且 jQuery 动画不会以与过渡相同的速度/时间运行，它会创建一些空白空间。 .

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>