如何不使用jQuery來動畫div的寬度？

下面是我的CSS代碼如何不使用jQuery來動畫div的寬度？

.page1 { 
    width: 0%; } 

.page2 { 
    width: 0%; }

下面是jQuery的語法

$('.page2').animate({ 
     width: "10%" 
    });

當我改變我的網頁，從第1頁至第2頁，這一頁的DIV的人會改變它的寬度，因爲這個類的div轉換爲.page2，其中原始爲.page1。

和上面的jQuery語法，該div將具有動畫效果。

我的問題是，我可以做同樣的事情沒有jQuery？

我改變我的CSS代碼：

.page1 { 
    width: 0%; 
    transition: width 2s; } 

.page2 { 
    width: 0%; 
    transition: width 2s; }

，但什麼都沒有發生。

來源

2016-01-13 Dreams

請加上現場演示。意思是，請添加可運行的代碼，這樣我們就可以瞭解更多，你想說什麼。 –

你的類'page1/2'如何chnaged，這些點擊事件或懸停事件？什麼導致了課堂變化？請詳細說明。 – divy3993

你問這個：https：//jsfiddle.net/jr7ey4k6/？ – Rayon

您的意思是您想在頁面加載時爲.page1和.page1創建動畫效果嗎？如果是，那麼你可以參考我的解決方案使用CSS動畫。

DEMO

@keyframes animateWidth { 
    0% {width: 0%; height: 10px;} 
    50% {width: 100%; height: 10px;} 
    100% {width: 100%; height: 300px;} 
}

使用CSS動畫只需創建一個動畫，一旦頁面加載動畫將開始。

據我所知，所有瀏覽器都以不同的方式做出迴應，您無法使用CSS轉換來控制頁面加載動畫。您的安全解決方案將使用動畫。

因爲你可以參照這裏其他的變通辦法：

Using CSS for fade-in effect on page load

來源

2016-01-13 06:38:22 Vincent1989

感謝您的幫助。還有一個問題，如果我有兩個或三個或更多頁面，我需要爲每個頁面編寫更多的@keyframes ，對？ – Dreams

@aBloomer，不，完全不是你使用關鍵幀動畫的原因，並給出一個名稱（animateWidth）是因爲它可以一遍又一遍地重複使用。所以如果你的第二和第三頁是使用完全相同的動畫，那麼只需引用名稱就可以了，代碼少，加載速度更快，效率更高，並且很容易實現..... – Vincent1989

謝謝。如果動畫不同，我需要創建一個新的，對吧？例如，寬度：page1爲10％，page2爲20％等等。 – Dreams

試試這個：

HTML

<div class="animated">Boca Juniors</div>

CSS

.animated { 
    /* just for demo */ 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    border: 3px solid steelblue; 
    background: gold; 
    font-weight: bold; 
    color: steelblue; 

    /* Transition */ 
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ 
    transition: width 2s; 
    width: 100%; 
} 
.animated:hover { 
    width: 50%; 
}

DEMO

來源

2016-01-13 06:30:19 Ferrrmolina

如何不使用jQuery來動畫div的寬度？

回答

相關問題