用位置移動物體的過渡：固定？

這看起來應該是一個簡單的問題，但我決不是一個CSS專家，我一直在試圖弄清楚它在牆上打我的頭。所以我有一個ContentHeader元素，當用戶向下滾動某個點時，我希望它向上滑動以覆蓋NavigationHeader元素。我通過將className屬性從「content-header」更改爲「content-header top」來改變ContentHeader的位置，ContentHeader只是跳轉到新的位置，而不是平滑過渡。這是我使用目前CSS：用位置移動物體的過渡：固定？

.content-header { 
    position: fixed; 
    top: 50; 
    width: inherit; 
    z-index: 1030; 
    padding: 12px 15px 12px 15px; 
    transition: top 1s linear; 
} 
.content-header.top { 
    top: 0; 
}

如果你需要看的JavaScript，讓我知道，我可以補充一點爲好，但它基本上只是在做...

<section className={className} ...

...其中className的值根據ContentHeader的位置而定。我想也許問題是，這是發生在一個React渲染塊內，並且正在跳過轉換，但我試圖用一個不會強制重新渲染的onClick事件來改變類，結果是一樣的。如果有人可以幫忙，我會很感激！

來源

2017-03-09 dlwiest

你對你的top價值缺失px，應閱讀top: 50px;

$('button').on('click', function() { 
 
    $('h1').toggleClass('top'); 
 
})

.content-header { 
 
    position: fixed; 
 
    top: 50px; 
 
    width: inherit; 
 
    z-index: 1030; 
 
    padding: 12px 15px 12px 15px; 
 
    transition: top 1s linear; 
 
} 
 

 
.content-header.top { 
 
    top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 class="content-header">header</h1> 
 
<button>click</button>

這就是說，我會用transform: translateY();，而不是top，因爲這是更好的性能。使用transition或animation與transform獲得GPU加速，其中轉換top沒有。

$('button').on('click', function() { 
 
    $('h1').toggleClass('top'); 
 
})

.content-header { 
 
    position: fixed; 
 
    transform: translateY(50px); 
 
    width: inherit; 
 
    z-index: 1030; 
 
    padding: 12px 15px 12px 15px; 
 
    transition: transform 1s linear; 
 
} 
 

 
.content-header.top { 
 
    transform: translateY(0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 class="content-header">header</h1> 
 
<button>click</button>

來源

2017-03-10 00:12:41

這絕對是正確的答案，特別是列入使用'transform'了'top'的。作爲一個團隊，我們最近做了一個非常動畫的網站，性能差異可能會非常驚人。 –

這工作，並感謝性能技巧！ – dlwiest

@dlwiest真棒不客氣 –

嘗試給出初始值top單位，例如：top: 50px。

.content-header { 
    position: fixed; 
    top: 50px; // add `px` unit here 
    width: inherit; 
    z-index: 1030; 
    padding: 12px 15px 12px 15px; 
    transition: top 1s linear; 
}

來源

2017-03-09 23:50:14 edwarddamato

用位置移動物體的過渡：固定？

回答

相關問題