CSS3 एनीमेशन और डिस्प्ले कोई नहीं

Question

मेरे पास एक div के लिए एक सीएसएस 3 एनीमेशन है जो एक निश्चित समय के बाद स्लाइड करता है। मैं चाहता हूं कि एनिमेटेड div की जगह भरने के लिए कुछ divs के लिए कुछ divs के लिए है, जो तब उन तत्वों को पृष्ठ के नीचे धक्का देगा।

जब मैं इसे पहले div पर कोशिश करता हूं तो स्लाइड में तब भी स्थान लेता है जब यह दिखाई नहीं देता है। यदि मैं div को display:none में बदलता हूं तो div बिल्कुल स्लाइड नहीं करता है।

मैं कैसे एक div है जगह नहीं ले जब तक यह में आने के लिए समय समाप्त हो गया है (समय के लिए सीएसएस का उपयोग कर।)

मैं एनिमेशन के लिए Animate.css का उपयोग कर रहा है। कोड से पता चलता मैं मुख्य div छिपा हो चाहते हैं और अन्य divs पहली बार में दिखाने के रूप में

<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div> 

<div id="div1"><!-- Content --></div> 
<div id="div2"><!-- Content --></div> 
<div id="div3"><!-- Content --></div> 

:

यहाँ कोड कैसा दिखता है। तब मैं निम्नलिखित देरी की स्थापना की है:

#main-div{ 
    -moz-animation-delay: 3.5s; 
    -webkit-animation-delay: 3.5s; 
    -o-animation-delay: 3.5s; 
    animation-delay: 3.5s; 
} 

ऐसा नहीं है कि मुद्दा यह है कि मैं अन्य divs नीचे पुश करने के लिए मुख्य div चाहते हैं के रूप में यह में आता है पर है

मैं यह करने के लिए कैसे करते हैं।?

नोट: मैंने ऐसा करने के लिए jQuery का उपयोग करने पर विचार किया है, हालांकि मैं कड़ाई से सीएसएस का उपयोग करना पसंद करता हूं क्योंकि यह चिकना है और समय थोड़ा बेहतर नियंत्रित होता है।

संपादित

मैं कोशिश की है क्या Duopixel सुझाव दिया लेकिन या तो मैं गलत समझा और इस सही ढंग से नहीं कर रहा हूँ या यह काम नहीं करता।

एचटीएमएल

<div id="main-div" class="animated fadeInDownBig"><!-- Content --></div> 

सीएसएस

#main-image{ 
    height: 0; 
    overflow: hidden; 
    -moz-animation-delay: 3.5s; 
    -webkit-animation-delay: 3.5s; 
    -o-animation-delay: 3.5s; 
    animation-delay: 3.5s; 
} 
#main-image.fadeInDownBig{ 
    height: 375px; 
} 

Answer 1

सीएसएस (या उस मामले के लिए jQuery) display: none; और display: block; के बीच एनिमेट नहीं कर सकता है। इससे भी बदतर: यह height: 0 और height: auto के बीच एनिमेट नहीं कर सकता है। इसलिए आपको ऊंचाई को कड़ी मेहनत करने की आवश्यकता है (यदि आप मूल्यों को कड़ी मेहनत नहीं कर सकते हैं तो आपको जावास्क्रिप्ट का उपयोग करने की आवश्यकता है, लेकिन यह एक बिल्कुल अलग सवाल है);

#main-image{ 
    height: 0; 
    overflow: hidden; 
    background: red; 
    -prefix-animation: slide 1s ease 3.5s forwards; 
} 

@-prefix-keyframes slide { 
    from {height: 0;} 
    to {height: 300px;} 
} 

आप उल्लेख करते हैं कि आप Animate.css का उपयोग कर रहे हैं, जिसे मैं परिचित नहीं हूं, इसलिए यह एक वेनिला सीएसएस है।

आप एक डेमो देख सकते हैं: http://jsfiddle.net/duopixel/qD5XX/

Answer 2

मैं एक ही समस्या थी, क्योंकि जैसे ही display: x; के रूप में एनीमेशन में है, यह जीत हासिल की: यहाँ कोड है एनिमेट नहीं

मैं कस्टम कीफ्रेम बनाने में समाप्त हुआ, पहले display मूल्य को फिर अन्य मानों को बदल रहा था। एक बेहतर समाधान दे सकता है।

या display: none; का उपयोग करने के बजाय position: absolute; visibility: hidden; का उपयोग करना चाहिए।

Answer 3

कुछ जवाब पहले से ही कर रहे हैं, लेकिन यहाँ मेरे समाधान है:

मैं opacity: 0 और visibility: hidden का उपयोग करें। यह सुनिश्चित करने के लिए कि visibility एनीमेशन से पहले सेट है, हमें सही देरी सेट करनी होगी।

मैं डेमो को सरल बनाने के लिए http://lesshat.com का उपयोग करता हूं, इसके बिना उपयोग के लिए बस ब्राउज़र उपसर्ग जोड़ता हूं।

(जैसे -webkit-transition-duration: 0, 200ms;)

.fadeInOut { 
    .transition-duration(0, 200ms); 
    .transition-property(visibility, opacity); 
    .transition-delay(0); 

    &.hidden { 
     visibility: hidden; 
     .opacity(0); 
     .transition-duration(200ms, 0); 
     .transition-property(opacity, visibility); 
     .transition-delay(0, 200ms); 
    } 
} 

तो जैसे ही आप अपने तत्व को वर्ग hidden जोड़ने के रूप में, यह पता फीका करना होगा। कोई भी

यह एक प्रदर्शन देते - -

Answer 4

निम्नलिखित आप एक तत्व जब

1. यह एक प्रदर्शन देते हुए चेतन करने के लिए मिल जाएगा ब्लॉक

सीएसएस

.MyClass { 
     opacity: 0; 
     display:none; 
     transition: opacity 0.5s linear; 
     -webkit-transition: opacity 0.5s linear; 
     -moz-transition: opacity 0.5s linear; 
     -o-transition: opacity 0.5s linear; 
     -ms-transition: opacity 0.5s linear; 
} 

जावास्क्रिप्ट

function GetThisHidden(){ 
    $(".MyClass").css("opacity", "0").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend', HideTheElementAfterAnimation); 
} 

function GetThisDisplayed(){ 
    $(".MyClass").css("display", "block").css("opacity", "1").unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend"); 
} 

function HideTheElementAfterAnimation(){ 
    $(".MyClass").css("display", "none"); 
} 

Answer 5

आप के साथ max-height

#main-image{ 
    max-height: 0; 
    overflow: hidden; 
    background: red; 
    -prefix-animation: slide 1s ease 3.5s forwards; 
} 

@keyframes slide { 
    from {max-height: 0;} 
    to {max-height: 500px;} 
} 

मैं Duopixel के डेमो यहाँ अद्यतन एक शुद्ध सीएसएस कार्यान्वयन के लिए प्रबंधन कर सकते हैं: http://jsfiddle.net/qD5XX/231/

[के रूप में मैं करने के लिए पर्याप्त प्रतिष्ठा नहीं है उनके उत्तर पर टिप्पणी करें]

Answer 6

मेरे पास एक div नहीं है जब तक कि इसमें आने का समय न हो (समय के लिए सीएसएस का उपयोग करके)

यहां एक ही समस्या का मेरा समाधान है।

इसके अलावा मेरे पास एक और स्लाइड शो लोड करने वाले अंतिम फ्रेम पर onclick है, और यह अंतिम फ्रेम दिखाई देने तक क्लिक करने योग्य नहीं होना चाहिए।

असल में मेरा समाधान का उपयोग करके 1 पिक्सेल उच्च रखना है, जब मुझे इसकी आवश्यकता हो तो ज़ूमिंग करें। यदि आपको ज़ूम प्रभाव पसंद नहीं है तो आप स्लाइड को ज़ूम करने के बाद opacity से 1 को पुनर्स्थापित कर सकते हैं।

#Slide_TheEnd { 

    -webkit-animation-delay: 240s; 
    animation-delay: 240s; 

    -moz-animation-timing-function: linear; 
    -webkit-animation-timing-function: linear; 
    animation-timing-function: linear; 

    -moz-animation-duration: 20s; 
    -webkit-animation-duration: 20s; 
    animation-duration: 20s; 

    -moz-animation-name: Slide_TheEnd; 
    -webkit-animation-name: Slide_TheEnd; 
    animation-name: Slide_TheEnd; 

    -moz-animation-iteration-count: 1; 
    -webkit-animation-iteration-count: 1; 
    animation-iteration-count: 1; 

    -moz-animation-direction: normal; 
    -webkit-animation-direction: normal; 
    animation-direction: normal; 

    -moz-animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 

    transform: scale(0.001); 
    background: #cf0; 
    text-align: center; 
    font-size: 10vh; 
    opacity: 0; 
} 

@-moz-keyframes Slide_TheEnd { 
    0% { opacity: 0; transform: scale(0.001); } 
    10% { opacity: 1; transform: scale(1); } 
    95% { opacity: 1; transform: scale(1); } 
    100% { opacity: 0; transform: scale(0.001); } 
} 

बाइट्स के लिए अन्य कीफ्रेम हटा दिए जाते हैं। कृपया अजीब कोडिंग की अवहेलना करें, यह एक सरणी से एक php स्क्रिप्ट चुनने वाले मानों और एक टेम्पलेट को str_replacing द्वारा किया गया है: मैं 100+ divs स्लाइड शो पर प्रत्येक मालिकाना उपसर्ग के लिए सबकुछ पुनः टाइप करने के लिए बहुत आलसी हूं।

Answer 7

जब ऊंचाई (0 से ऑटो के लिए) एनिमेट, transform: scaleY(0); का उपयोग कर display: none; तत्व को छिपाने के लिए एक और उपयोगी दृष्टिकोण के बजाय है:

.section { 
    overflow: hidden; 
    transition: transform 0.3s ease-out; 
    height: auto; 
    transform: scaleY(1); 
    transform-origin: top; 

    &.hidden { 
    transform: scaleY(0); 
    } 
}