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

Question

我搜索了一段时间但没有找到关于此的帖子:我正在使用 jQuery fadeOut() 来动画元素。

我想使用 jQuery 的 fadeOut() 函数淡出 scale 为 1.75 (175%) 的元素。目前它是一个常见的淡出动画，但我希望淡出动画向外扩展(元素膨胀)。

我已经使用 keyframes 制作了一个带有 CSS 动画的示例(lightblue 元素)。我想用 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>

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>