javascript-使用jQuery fadeOut()缩放动画

我搜索了一段时间,但没有找到关于此的文章：我正在使用jQuery fadeOut()为元素设置动画.

我想通过使用jQuery的fadeOut()函数以1.75(175％)的比例淡出元素.目前,这是一种常见的淡出动画,但我希望淡出动画可以放大(元素膨胀).

我使用关键帧通过CSS动画制作了一个示例(浅蓝色元素).我想用fadeOut()解决动画(也许您必须向下滚动代码段才能看到示例),这可能吗？我希望这足够清楚.

$('.hide').click(function() {
  $('.animate').fadeOut(500);
});

$('.show').click(function() {
  $('.animate').fadeIn(500);
});

.animate {
  width: 150px;
  height: 150px;
  background-color: lightcoral;
  margin-top: 20px;
}

.animate--css {
  background-color: lightblue;
}

.animate--css {
  width: 150px;
  height: 150px;
  background-color: lightblue;
  margin-top: 20px;
  animation: zoomOut 1s infinite;
}

@keyframes zoomOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="hide">Fade out</button>
<button class="show">Fade in</button>
<div class="animate"></div>
<div class="animate--css"></div>

解决方法:

您可以在元素褪色之前使用start来应用CSS：

$('.hide').click(function() {
  $('.animate').fadeOut({'start':function() {$(this).css('transform','scale(1.75)') },'duration':500});
});

$('.show').click(function() {
  $('.animate').fadeIn({'start':function() {$(this).css('transform','scale(1)') },'duration':500});
});

.animate {
  width: 150px;
  height: 150px;
  background-color: lightcoral;
  margin-top: 20px;
  transition:0.5s all;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="hide">Fade out</button>
<button class="show">Fade in</button>
<div class="animate"></div>

标签：animation,fadeout,css,javascript,jquery
来源： https://codeday.me/bug/20191025/1925836.html