Question

如何使类之间的过渡平滑而不是您在此处看到的抖动效果： http://codepen.io/Cogarius/pen/tfhgx

由于宽度和高度的差异以及班级正在转换的边框大小的变化，盒子会严重震动。

HTML：

<div class="outer">
  <div class="original"></div>
</div>

CSS：

.original {
  float: left;
  height: 0;
  width: 0;
  background: #ffffff;
  border: 150px solid #000000;
  margin: 0px;
}

.changed {
  float: left;
  height: 296px;
  width: 296px;
  border: 2px solid #ff3333;
  background: #ffffff;
  margin: 0px;
}

的jQuery

$(document).ready(function(){
  $('.original').on('click', function(){  
    $(this).toggleClass( "changed", 500, "easeOutQuad" );
  });
});

Answer 1

有几种方法可以解决这个问题（好消息是，它们都是无抖动的：D）

框阴影

一个诀窍是使用box shadows对您有利。对于休息状态，您可以确保框阴影（插图）填满框的整个尺寸。对于切换状态，您可以通过减小其展开半径以及更改其颜色来折叠框阴影。 CodePen Demo

.original {
  height: 300px;
  width: 300px;
  background: #fff;
  box-shadow: inset 0 0 0 150px #000000;
  position: relative;
  transition: all .5s ease-in-out;
}
.changed {
  box-shadow: inset 0 0 0 2px #ff3333;
}

一个警告：您需要以像素值指定展开半径（第四个数字）...因此，如果您使用的是响应元素，这可能是一个问题。

我可以预见的另一个问题是，由于扩展半径必须是像素值，它可能仍然显示为慢转换速度的抖动。对于完全无抖动的过渡，我只能建议利用CSS3 2D变换，我们需要使用伪元素（参见下一个解决方案）。

伪元素

这个技巧是使用伪元素，例如::before，在容器上，然后在切换类时缩放它。在所有州下，容器的背景为黑色，黑色边框为2px。伪元素绝对位于中心并填充其父级的宽度和高度，但在静止状态下，它被缩放为0（即没有大小）。在切换状态下，我们将其缩小回原始尺寸。 CodePen Demo

.original {
  box-sizing: border-box;
  height: 300px;
  width: 300px;
  background:#000;
  border: 2px solid #000;
  position: relative;
  transition: all .5s ease-in-out;
  &::before {
    background-color: #fff;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all .5s ease-in-out;
    transform: scale(0);
  }
}

.changed {
  background-color: #ff3333;
  border-color: #ff3333;
  &::before {
    background-color: #fff;
    transform: scale(1);
  }
}

请注意，我使用过：

box-sizing属性，因此声明的宽度为最终尺寸
转换父元素的边框颜色，以及伪元素的背景颜色。

Answer 2

您可以使用CSS替换当前的转换。只需在transition选择器中添加.changed属性：

.changed {
    ...
    transition: 0.5s; /* Equal to 500ms */
}

仍然存在晃动，但它不如通过jQuery处理时那么突出。

CodePen demo

Answer 3

更改width和height值会导致这种情况。如果您想要平滑过渡，则需要使用硬件加速css转换，例如scale，translateX，translateY等。

Here is a more descriptive article关于此事。

如何使用jQuery在类之间平滑过渡

3 个答案:

框阴影

伪元素