如何触发css3过渡动画

Posted 2023-03-30

参考技术A 不过要注意CSS3属性兼容性问题
平时我们直接使用transition动画一般是这样的
鼠标放置在div方块上触发动画效果（鼠标悬浮div上即可触发） 参考技术B 发生事件时就触发了

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

【中文标题】如果应用了 css 过渡，为啥动画回调函数会立即触发？

【英文标题】：Why does animate callback function fire immediately if there is a css transition applied?如果应用了 css 过渡，为什么动画回调函数会立即触发？

【发布时间】：2019-10-25 22:47:07

【问题描述】：

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

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

var width = 500;
$('.start-animation').on('click', () => 
  $('.test').animate(
    'width': `$widthpx`
  , 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>

【参考方案1】：

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

var width = 500;
$('.start-animation').on('click', () => 
  $('.test').removeClass('transition').animate(
    'width': `$widthpx`
  , 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': `$widthpx`
  , 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>

【讨论】：

嗯，我想我必须添加一个过渡类。当它让我接受时会接受