Почему функция анимированного обратного вызова срабатывает немедленно, если применяется переход css? - PullRequest
Новая
       22

Почему функция анимированного обратного вызова срабатывает немедленно, если применяется переход css?

2 голосов
/ 11 июня 2019

Поскольку я использую переход в css, код немедленно запускает функцию обратного вызова и игнорирует тип linear облегчение и использует значение по умолчанию swing облегчение.

Почему это происходит и есть ли способ заставить функцию анимации правильно работать с переходом? Мне нужен переход, потому что если я пытаюсь оживить 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>

1 Ответ

2 голосов
/ 11 июня 2019

Удалите переход при запуске функции 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>
...