Question

我有两个div元素，可以通过javascript的click事件控制宽度。无论是单击事件（切换className）还是悬停事件，其伪元素的背景图像似乎都在晃动（在chrome上确认，即edge和safari）。

我已经查看过SO和Google，但是更改背景本身的大小似乎是个问题，这是我在这里没有做的。

section {
	width: 100%;
	max-width: 1920px;
	position: relative;
	min-height: 700px;
	overflow: hidden;
}

.container {
	width: 99%;
	height: 700px;
	position: absolute;
	transition: 1s linear width;
	overflow: hidden;
}

.left {
	top: 0;
	left: 0;
	background: transparent;
	transform: skew(20deg) translateX(-50%);
	border-radius: 0 20px 20px 0;
}

.left::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	width: 100vw;
	transform: skew(-20deg);
	background-image: url(https://cdn.pixabay.com/photo/2018/12/04/22/38/road-3856796__340.jpg);
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

.right {
	top: 0;
	right: 0;
	border-radius: 20px 0 0 20px;
	transform: skew(20deg) translateX(50%);
}

.right::after {
	content: "";
	position: absolute;
	top: 0;
	right: 50%;
	height: 100%;
	width: 100vw;
	transform: skew(-20deg);
	background-image: url(https://media.istockphoto.com/photos/taking-a-walk-in-the-woods-picture-id1130258547?s=2048x2048);
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

.right:hover {
	width: 250%;
}

<section>
  <div class="container left"></div>
	<div class="container right"></div>
</section>

Answer 1

我已经优化了代码，并考虑使用左/右来定义元素的大小，然后通过转换来更改宽度过渡。

section {
  max-width: 1920px;
  position: relative;
  overflow: hidden;
  height: 500px;
}

.container {
  position: absolute;
  top: 0;
  bottom:0;
  transition:transform 1s linear;
  overflow: hidden;
  transform: skew(20deg);
}

.left {
  left: -60vw; /*to create the overflow*/
  right: calc(55% + 10px); /*10px distance between both element*/
  border-radius: 0 20px 20px 0;
}

.right {
  right: -80vw;
  left: 45%; /*100% - 55% (the right value of .left)*/
  border-radius: 20px 0 0 20px;
}

.left::after,
.right::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  bottom: 0;
  right: -40%;
  transform: skew(-20deg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition:transform 1s linear;
}

.left::after {
  background-image: url(https://cdn.pixabay.com/photo/2018/12/04/22/38/road-3856796__340.jpg);
  transform-origin: bottom;
}

.right::after {
  transform-origin: top;
  background-image: url(https://media.istockphoto.com/photos/taking-a-walk-in-the-woods-picture-id1130258547?s=2048x2048);
}

.right:hover {
  transform: skew(20deg) translateX(-60vw);
}

.right:hover::after {
  transform: skew(-20deg) translateX(60vw);
}

<section>
  <div class="container left"></div>
  <div class="container right"></div>
</section>

Answer 2

抖动源自background-position的居中background-image。

让我们手动执行此操作：

对200px宽div和background-image宽200px的图像进行成像。
图像设置为center版background-position，并且没有其他背景设置。
然后，图像将从0px的{{1}}到200px定位

现在使用相同的div和div对相同的background-image进行成像。
唯一的区别是：div的宽度为background-position，比以前增加了1。
现在，图像将从201px的{{1}}到0.5px定位，四舍五入到200.5px到div

再往前走一步：想象1px中的201px为width，而无需更改任何其他属性。
图像的位置将从div到202px。和以前完全一样。

现在，因为您的div居中。背景开始动摇

（这并不总是可见的。它取决于上下文的宽度）；

1px

201px

let buttons = document.querySelectorAll('button');
let bg = document.querySelector('#bg')

buttons.forEach((btn) => {
  btn.addEventListener('click', (e) => {
    bg.style.width = btn.getAttribute('w')
  })
})

解决方案是：左图应从左起#bg { display: block; width: 200px; height: 200px; background-color: gold; margin: 10px auto; background-image: url('https://picsum.photos/200/200?image=990'); background-position: center; background-repeat: no-repeat; } body { text-align: center; width: 400px; }定位，右图应从右起<button w="200px">200</button> <button w="201px">201</button> <button w="202px">202</button> <div id="bg"></div>

定位

此代码段应以整页视图显示

background-position: 0% 50%;

background-position: 100% 50%;

请参阅以下代码笔：https://codepen.io/HerrSerker/pen/zbWpjB以获取SCSS版本

Answer 3

您可以尝试将'.right :: after'和'.left :: after'元素的宽度设置为“ 100％”，而不是基于视图大小。在开发工具中完成后，它似乎可以正常工作。

Answer 4

抖动是在要调整大小的元素上使用width: 100vw;的结果。我最好的猜测是，这导致背景图像的高度和宽度在横切过程中被重新计算了很多次，因此看起来似乎有些晃动。

您可以尝试使用width: 100%;来代替，但这会导致图像调整大小的行为发生变化。

背景瞬息万变

4 个答案: