时间戳

首页 > 解决方案 > 如何避免过渡和变换结合时对“悬停”的“抖动效应”？

html - 如何避免过渡和变换结合时对“悬停”的“抖动效应”？

问题描述

我正在尝试在hover、 usingtransform和transition一起制作一个盒子。主要思想是有一个颠倒的文本（不可读），当鼠标移到每个框上时，文本将在该特定框上转换为正常（可读）。

新小提琴编辑：

https://jsfiddle.net/mt3x1phq/

我用css得到了效果。如果你快速移动鼠标，你可以看到效果，但如果你慢慢移动鼠标，盒子开始“晃动”。

我的问题是：如何避免这种“摇晃”效应？

这是我正在使用的 CSS 代码：

.card-list {
  width: 50vw;
  margin: 60px auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 60px;
  text-align: center;
}

.card-container {
  display: flex;
  flex-direction: column;
  background-color: #95dada;
  border: 1px solid grey;
  border-radius: 5px;
  padding: 25px;
  cursor: pointer;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform: scale(-1.05);
  transition: transform 0.5s ease-in-out;
}

.card-container:hover {
  transform: scale(1.05);
}

标签： htmlcsscss-transitionstransformtransition

解决方案

.card-list {
  width: 50vw;
  margin: 60px auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 60px;
  text-align: center;
}

.card-container {
  display: flex;
  flex-direction: column;
  background-color: #95dada;
  border: 1px solid grey;
  border-radius: 5px;
  padding: 25px;
  cursor: pointer;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform: scale(-1.05);
  transition: transform 0.5s ease-in-out;
}

.card-list:hover .card-container {
  transform: scale(1.05);
}
 <div class="card-list">
      <div class="card-container">
        <h1>
          Hello World
        </h1>
      </div>
    </div>

考虑这个代码片段。

   .card-list{
       height: 143px;
    }
    .card-list:hover .card-container {
      transform: scale(1.05);
    }

缩放时鼠标从 DOM 上移开 ,.card-container

.card-list {
  width: 50vw;
  margin: 60px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 60px;
  text-align: center;
}

.card-container {
  display: flex;
  flex-direction: column;
  background-color: #95dada;
  border: 1px solid grey;
  border-radius: 5px;
  padding: 25px;
  cursor: pointer;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform: scale(-1.05);
  transition: transform 0.5s ease-in-out;
}

/* .card-container:hover {
  transform: scale(1.05);
} */

.card-container-wrap:hover .card-container {
  transform: scale(1.05);
}
 <div class="card-list">
   <div class="card-container-wrap">
	 <div class="card-container">
	   <h1> Hello World </h1>
	 </div>
   </div>
   <div class="card-container-wrap">
	 <div class="card-container">
	   <h1> Hello World </h1>
	 </div>
   </div>
</div>
在.card-container外加一层DOM，:hover的DOM不缩放

推荐阅读