javascript - 变换:比例(n)； - mousein 与 mouseout 不同

Question

我正在使用 transform: scale();在一个网站上。我希望有人能帮助我解决我无法通过网络搜索解决的问题。

这是我的代码:HTML:

<div class="hopp_circle_img">
   <img src="..." alt="" />
</div>

CSS:

.hopp_circle_img {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 0;
}
.hopp_circle_img img {
  -webkit-transition: transform 0.15s;
  transition: transform 0.15s;
}
.hopp_circle_img img:hover {
  display: block; 
  z-index: 100;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}   

效果很好，但有人要求我在骏马移入时和移出时产生不同的效果。例如。在鼠标进入时快速缩放，但在鼠标移出时缩放缓慢。在 CSS3 或 Javascript 中是否有任何解决方案？

谢谢盒子

Answer 1

设置到元素的慢速过渡 (.hopp_circle_img img)，以及悬停时到元素的快速过渡 (.hopp_circle_img img:hover)。因此，当您离开该元素时，较慢的过渡将生效。

我已经设置了 transition shorthand property具有不同的持续时间和缓动，但您可以更改 transition-duration或设置 transition-delay或不同的 transition-timing-function (easing) .

.hopp_circle_img {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  z-index: 0;
}
.hopp_circle_img img {
  -webkit-transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
}
.hopp_circle_img img:hover {
  display: block;
  z-index: 100;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: transform 0.15s;
  transition: transform 0.15s;
}

<div class="hopp_circle_img">
  <img src="https://65.media.tumblr.com/avatar_39c12973e9fe_128.png" alt="" />
</div>