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

我所做的是希望能解决您遇到的问题，是：

我删除了body上的转换，因为它会解决其中的所有内容。
在移动div周围添加了一个容器，以便定位（仅）移动框。
.test上的转换仅在right属性上设置，因为这是唯一改变的内容。
在画布的右侧（外侧）绝对定位元素时，不需要left: 0;。

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

1 个答案: