滾動回到頂部並移除 class 時跳轉動畫元素

Question

我有一個關於 animation 的問題。 所以我做了這個簡單的 animation 應該在滾動上激活並將徽標移動到左側和 swing 它有點。 一切都很好，但是當我滾動回頂部時，元素會跳轉到之前的 position 並且看起來不自然。 有什么辦法可以讓過渡更順暢嗎？

在我僅使用這些屬性進行簡單轉換之前：

.sticky {
    transition: all .3s ease-in .1s;
    transform: translateX(-70px) rotate(25deg);
}

它沒有跳回來，但是當我添加關鍵幀並使 animation 更復雜時，問題就出現了。

#logo {
    max-width: 50px;
    display: inline-block;
    position: fixed;
    transition: all .3s ease-in-out .5s;
    -webkit-transform-origin: 50% 50% 0;        
    transform-origin: 50% 50% 0;
    font-size:50px;
}

.sticky {
    transition: all .3s ease-in-out .5s;    
    -webkit-animation: swinging 4.5s ease-in-out both;
    animation: swinging 4.5s ease-in-out both;
    animation-fill-mode: both;       
}

@keyframes swinging {
    0% {transform: translateX(0px) rotate(-10deg);}
    20% {transform: translateX(-70px) rotate(10deg);}
    40% {transform: translateX(-60px) rotate(-5deg);}
    60% {transform: translateX(-70px) rotate(5deg);}
    80% {transform: translateX(-70px) rotate(-2deg);}
    100% {transform: translateX(-70px) rotate(0deg);}
}

JavaScript

window.onscroll = function() {
    myFunction()
};
        
var header = document.getElementById("logo");
var sticky = header.offsetTop;
        
function myFunction() {
    if (window.pageYOffset > sticky) {        
        header.classList.add("sticky");
    } else {  
        header.classList.remove("sticky");
    }
}

我將非常感謝任何解決方案和幫助。 這是一個或多或少顯示問題的簡單代碼筆： https://codepen.io/tonysnufkin/pen/jOVXbpP

Answer 1

一種解決方案是提供一個“反動畫”，它使元素從最終的 position swinging回到初始 position。 例如：

@keyframes unswing {
  0% {transform: translateX(-70px)} /* final position of swinging transform */
  100% {transform: translateX(0)} /* original position */
}

這具有在初始頁面加載時動畫的副作用。 如果這不是可取的，請考慮將 animation 連接到 class ，您可以在移除sticky時使用 javascript 進行切換。

更新了 Codepen