尝试使用translateX动画将元素从视口外部移动到视口内部时出错

Question

试图使用translateX将元素从视口外部移动到视口内部，但视口会移动到该元素。你可以在这里查看Codepen

#test:target{ right:300px;  transform: translateX(-190%);
  -webkit-transform: translateX(-190%);
  -moz-transform: translateX(-190%);
  -o-transform: translateX(-190%);
  transition-delay: .4s !important;}

Answer 1

我希望能解决您遇到的问题，是这样的：

1. 我删除了body上的转换，因为它会处理其中的所有内容
2. 在移动的div周围添加一个容器，以定位（仅）移动的箱子
3. .test上的转换仅在right属性上设置，因为这是唯一更改的内容
4. 当将元素absolute定位在画布的右侧（外侧）时，不需要left: 0;

请参阅下面的示例（全屏）并进行演示，我对实际动作进行了一些更改，所以请根据您的需要进行设置。在Chrome和Firefox中测试。

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #fff;
  overflow: hidden;
}
a {
  text-decoration: none;
  color: #fff;
}
.button {
  background: #333;
  padding: 20px;
  text-align: center;
}
.test-container {
  width: 100%;
  height: 200px;
  position: relative;
  background: lightgrey;
}
.test {
  position: absolute;
  top: 0;
  right: -20%;
  width: 270px;
  height: 170px;
  text-align: center;
  font-size: 80px;
  line-height: 1.3;
  /*   transform: translateX(660%);
  -webkit-transform: translateX(660%);
  -moz-transform: translateX(660%);
  -o-transform: translateX(660%); */
  transition: right .6s cubic-bezier(.22, .73, .4, 1.12);
  -webkit-transition: right .6s cubic-bezier(.22, .73, .4, 1.12);
  -moz-transition: right .6s cubic-bezier(.22, .73, .4, 1.12);
  -o-transition: right .6s cubic-bezier(.22, .73, .4, 1.12);
  background: #000;
}
#test:target {
  right: 50%;
  transform: translateX(-190%);
  -webkit-transform: translateX(-190%);
  -moz-transform: translateX(-190%);
  -o-transform: translateX(-190%);
  transition-delay: .4s !important;
}

<div class="button"> <a href="#test">Button</a>
</div>
<div class="test-container">
  <div class="test" id="test">
  </div>
</div>