如何實現元素走出邊界的平滑過渡？

我有一個包含div的容器。通過點擊該方格，它開始移動並最終位於容器外部。如何實現元素走出邊界的平滑過渡？

我的問題是，這個內部塊正在修剪出來非常苛刻，而超越邊界。如何使用CSS方法更順利地完成這種轉換？當這個正方形消失變得對眼睛溫和時，我想得到一個效果。

也許我應該使用某種形式的主容器的圖像蒙版或正方形的淡入淡出效果。我不確定如何實現這一行爲。

預先感謝您！

.borderline { 
 
    position: relative; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    line-height: 150px; 
 
    width: 400px; 
 
    height: 150px; 
 
    overflow: hidden; 
 
} 
 

 
.square { 
 
    position: absolute; 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: #0087ff; 
 
} 
 

 
.square:focus { 
 
    transform: translateX(500px); 
 
    transition: all 2s; 
 
}

<div class='borderline'> 
 
    <div class='square' tabindex="1">Click me</div> 
 
</div>

來源

2017-08-17 Alexander Shmatko

，也許你可以動畫添加到您的CSS與狀混濁：

.square:focus { 
    transform: translateX(500px); 
    transition: all 2s; 
    animation-name: example; 
    animation-duration: 1s; 

} 
@keyframes example { 
    0% {opacity:1} 
    50% {opacity:1} 
    100% {opacity:0} 

}

https://codepen.io/anon/pen/rzppON

來源

2017-08-17 10:04:35

它閃爍了一下，在結束動畫上。 –

嗯，無論你認爲合適的動畫屬性，都可以按照你的意願製作。這是另一個例子：https://codepen.io/anon/pen/zdppor –

謝謝。我喜歡你的方法，阿爾瓦羅。 –

如何實現元素走出邊界的平滑過渡？

回答

相關問題