使用jQuery的fadeOut()实现比例动画

Question

我搜索了一段时间，但没有找到相关的帖子：我正在使用jQuery的fadeOut()来animate一个元素。

我想要通过使用jQuery的fadeOut()函数将元素的scale设置为1.75（175％）来淡出。目前它是一个普通的渐隐动画，但我希望淡出动画能够按比例缩放（元素膨胀）。

我用keyframes制作了一个示例（浅蓝色的元素）。我想用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>

- webta.st.ic

Answer 1

您可以使用 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>

- Temani Afif