動畫最大寬度在一個CSS類

我想一個CSS類，當一個元素被添加到document.body將動畫與max-width動畫最大寬度在一個CSS類

目前我知道如何與兩個類做出來，加上第二上課後。但是我需要在頁面中添加很多元素，並且在一個類中執行它會更加清晰。

我還想將它轉換爲使用一個類：http://codepen.io/hellomihai/pen/yYBPjW

CSS：

.hide-me { 
    overflow: hidden; 
    max-width: 0; 
} 

.show-me { 
    max-width: 1000px; 
    transition: max-width 5s; 
} 

.my-stuff { 
    height: 200px; 
    width: 600px; 
    background-color: red; 
}

HTML：

$(document).ready(function() { 
    var newDiv = document.createElement("div"); 
    document.body.appendChild(newDiv); 
    newDiv.className = 'my-stuff hide-me'; 
    setTimeout(function() { 
    $('.my-stuff').addClass('show-me'); 
    }, 1); 
});

來源

2015-08-28 mihai

您的意思是：max-width？ –

@PedroAffonso，是的，我的道歉。我經歷了一些編輯，從高度改變爲寬度。 – mihai

使用關鍵幀可以避免第二次添加類like so！

.my-stuff { 
    width: 600px; 
    height: 200px; 
    background-color: red; 
    -webkit-animation-name: example; 
    -webkit-animation-duration: 4s; 
    animation-name: example; 
    animation-duration: 4s; 
} 

@-webkit-keyframes example { 
    from { 
    width: 0; 
    } 
    to { 
    width: 600px; 
    } 
} 

keyframes example { 
    from { 
    width: 0; 
    } 
    to { 
    width: 600px; 
    } 
} 

$(document).ready(function() { 
    var newDiv = document.createElement("div"); 
    document.body.appendChild(newDiv); 

    // want to not use a setTimeout to add a class after 
    setTimeout(function() { 
     newDiv.className = 'my-stuff'; 
    }, 1); 
});

來源

2015-08-28 02:00:24 saj

使用關鍵幀是要走的路，因爲它只需要一個類用於「出現滑動」動畫。請更新您的答案（基於第二個鏈接），並將其標記爲正確。感謝您的及時響應！ – mihai

當然完成，歡呼聲 – saj

看起來不錯。 setTimeout不是必需的。你可以直接將'newDiv.className ='my-stuff';'添加到ready方法中。 – mihai

真的是周圍沒有辦法，除了默認情況下隱藏的每個格並用類來控制它們的外觀。我建議不要這樣做，因爲這會爲非動畫元素帶來更多工作。

div { 
    max-width: 0; 
}

來源

2015-08-28 01:56:43

我同意，這就是爲什麼我希望這種方法只用一個類來完成。請參閱@sajs答案。它運作良好。 – mihai

動畫最大寬度在一個CSS類

回答

相關問題