如何在html中使平滑缩放效果？

Question

我想使使用transform:scale(val)缩放的视频的缩放过渡更加平滑，因为您可以看到过渡是直接发生的，没有任何平滑度。

let scale = 1;
$('.plus').on('click',function(){
	$('.sample_video').css('transform','scale('+(scale+=0.25)+')');
});
$('.minus').on('click',function(){
	$('.sample_video').css('transform','scale('+(scale-=0.25)+')');
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}
.btnDiv {
  position:fixed;
  bottom:0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video class="sample_video" controls src="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4" autoplay>
</video>
<div class="btnDiv">
<button class="plus">
zoom in
</button>
<button class="minus">
zoom out
</button>
</div>

Answer 1

要平滑缩放效果，可以使用CSS中的transition属性：

.sample_video {
  transition: transform 0.3s;
}

let scale = 1;
$('.plus').on('click', function() {
  $('.sample_video').css('transform', 'scale(' + (scale += 0.25) + ')');
});
$('.minus').on('click', function() {
  $('.sample_video').css('transform', 'scale(' + (scale -= 0.25) + ')');
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

.btnDiv {
  position: fixed;
  bottom: 0px;
}

.sample_video {
  transition: transform 0.3s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video class="sample_video" controls src="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4" autoplay>
</video>
<div class="btnDiv">
  <button class="plus">
zoom in
</button>
  <button class="minus">
zoom out
</button>
</div>