सीएसएस एनीमेशन और प्रदर्शन कोई नहीं

Question

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

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

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

मैं एनिमेशन के लिए Animate.css का उपयोग कर रहा हूं।

यहाँ कोड की तरह दिखता है:

<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;
}

यह उस बिंदु पर है कि मैं मुख्य div को अन्य divs को नीचे धकेलना चाहूंगा क्योंकि यह आता है।

मैं यह कैसे करु?

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

संपादित करें

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

एचटीएमएल

<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

CSS (या 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/

Comments

मदद के लिए धन्यवाद, यह काम नहीं कर रहा है या मेरे पास इसे सही नहीं है। मेरे प्रश्न के लिए मेरा संपादन देखें।

— L84

क्षमा करें, मैं सीएसएस बदलावों के बारे में सोच रहा था जब मैंने लिखा था कि (यह बहुत सरल है), मैंने एनीमेशन वाक्यविन्यास के लिए कोड अपडेट किया है

— मेथोडिफिकेशन

सुंदर! एक जादू की तरह काम करता है। धन्यवाद! आपको एनिमेशन के लिए बहुत ही उपयोगी टूल Animate.css को देखना चाहिए ।

— L84

मैं हार्ड कोड को ऊंचाई नहीं दे सकता, यह जावास्क्रिप्ट का उपयोग करने का सबसे अच्छा तरीका क्या होगा?

— राफेल इसिड्रो

if you can't hard code the values then you need to use javascript। यह गलत है। आप अधिकतम-ऊँचाई वाली संपत्ति को चेतन कर सकते हैं, इससे बड़े मूल्य की अपेक्षा कर सकते हैं कि आप बॉक्स की अपेक्षा करें और यह ठीक काम करता है।

— ssc-hrep3

Answer 2

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

मैं का उपयोग करें 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को अपने तत्व में जोड़ते हैं , यह फीका हो जाएगा।

Comments

वाह! मैंने इस तरह का उपयोग किया: .default { opacity: 0; visibility: hidden; top: -10px; transition-duration: 200ms, 200ms, 0; transition-property: opacity, top, visibility; transition-delay: 0, 0, 200ms; } - .hidden { opacity: 1; visibility: visible; top: 0px; transition-duration: 200ms, 200ms, 0; transition-property: opacity, top, visibility; transition-delay: 200ms, 200ms, 0; } "ड्रॉप" प्रभाव बनाने के लिए, वास्तव में अच्छी तरह से काम किया! इसे प्यार करो @frozeman, धन्यवाद !!

— simey.me

ठीक है आपने तत्व छिपा दिया है, लेकिन जैसा कि स्वीकृत उत्तर कहता है, आपने प्रदर्शन से एनिमेटेड नहीं किया है: कोई नहीं; और प्रदर्शन: ब्लॉक; इसलिए आपका तत्व अभी भी पृष्ठ पर जगह ले रहा है

— svnm

एनिमेशन display: noneकरना संभव नहीं है।

— फेबियन वोगेलस्टेलर

जब आप किसी तत्व को अस्पष्टता या दृश्यता के साथ छिपाते हैं, तो यह अभी भी है, इसलिए यदि आपके पास उदाहरण लिंक हैं, तो वे अभी भी क्लिक करने योग्य होंगे। इससे बचने के लिए, आप उपयोग कर सकते हैं pointer-events: none;। यह माउस कर्सर के साथ किसी भी इंटरैक्शन को अक्षम करता है।

— pol_databender

visibility: hiddenइस बात का ध्यान रखें, आपको जरूरत नहीं हैpointer-events: none;

— Edu Ruiz

Answer 3

मैं एक ही समस्या थी, क्योंकि जैसे ही display: x;एनीमेशन में है, यह चेतन नहीं होगा।

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

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

Answer 4

आप के साथ एक शुद्ध सीएसएस कार्यान्वयन का प्रबंधन कर सकते हैं 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;}
}

तुम भी स्थापित करने के लिए हो सकता है padding, marginऔर border0 के लिए, या बस padding-top, padding-bottom, margin-topऔर margin-bottom।

मैंने यहां डुओपिक्सल का डेमो अपडेट किया: http://jsfiddle.net/qD5XX/231/

Answer 5

निम्नलिखित आपको एक तत्व को चेतन करेगा जब

1. यह एक प्रदर्शन दे रहा है - कोई नहीं
2. यह एक प्रदर्शन दे रहा है - ब्लॉक

सीएसएस

.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 6

जब एलीमिनेटिंग हाइट (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);
  }
}

Comments

हाँ, लेकिन वह खाली जगह छोड़ देता है!

— हाफिज तेमुरी

Answer 7

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

यहाँ उसी समस्या का मेरा समाधान है।

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

मूल रूप से मेरा समाधान यह है कि जब मुझे इसकी आवश्यकता हो तो इसे ज़ूम divकरके 1 पिक्सेल का उपयोग करके रखें scale(0.001)। यदि आपको ज़ूम इफ़ेक्ट पसंद नहीं है तो आप 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 + div स्लाइड शो पर प्रत्येक मालिकाना उपसर्ग के लिए सब कुछ पूर्वव्यापी करने के लिए बहुत आलसी हूं।