嘗試使用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. 將絕對元素定位在畫布右側（外側）時，不需要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>