एनिमेशन CSS3: प्रदर्शन + अस्पष्टता

Question

मैं एक CSS3 एनीमेशन के साथ एक समस्या है।

.child {
    opacity: 0;
    display: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    display: block;
}

यह कोड केवल तभी काम करता है जब मैं इसके परिवर्तन को हटाता हूं display।

मैं होवर के ठीक बाद डिस्प्ले बदलना चाहता हूं लेकिन ट्रांज़ेक्शन का उपयोग करते हुए अपारदर्शिता को बदलना चाहिए।

Comments

तो सीएसएस के रूप में दूसरों का सुझाव दिया काम नहीं करता है, यहाँ है fading के लिए एक बहुत ही सरल जावास्क्रिप्ट कोड।

— अभ्रनिल दास

Answer 1

माइकल्स जवाब के आधार पर यह उपयोग करने के लिए वास्तविक सीएसएस कोड है

.parent:hover .child
{
    display: block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

Comments

सभी ब्राउज़रों का समर्थन करने के लिए ..?

— david_adler

CSS3 सभी ब्राउज़रों में समर्थित नहीं है। अगर आप सही उपसर्गों को जोड़ना चाहते हैं

— क्रिस

के बारे में क्या जब बाहर मँडरा, कैसे fadeOutToNone को लागू करने के लिए?

— ग्रीन

जैसा कि आप एक प्रतिशत के अंशों का उपयोग कर सकते हैं, यह बेहतर है कि 0.001% की तरह कुछ का उपयोग करें, क्योंकि 1% क्योंकि यह "प्रारंभ" में देरी को कम करता है, जो कि लंबे समय तक एनीमेशन अवधि के साथ स्पष्ट हो सकता है

— Zach Saucier

-ओ-कीफ्रेम निर्देश वास्तव में बेकार है क्योंकि एनिमेशन का समर्थन करने वाला पहला ओपेरा संस्करण पहले से ही वेबकिट पर आधारित था।

— रिको ओसपेक

Answer 2

आप सीएसएस एनिमेशन के साथ कर सकते हैं:

0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;

Comments

अच्छा विचार है, मैं अपने तत्व को एनीमेशन-फिल-मोड के साथ होवर के दौरान प्रदर्शित करने में सफल रहा, लेकिन फिर आई माउसआउट, तत्व गायब हो जाता है।

— एलेक्सिस डेल्रीयू 20

आप फिल-मोड का उपयोग कर सकते हैं: एनीमेशन खत्म होने के बाद परिवर्तन जारी रखने के लिए आगे।

— माइकल मुल्नी 20

Answer 3

यदि संभव हो - visibilityइसके बजाय का उपयोग करेंdisplay

उदाहरण के लिए:

.child {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.parent:hover .child {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s, visibility 0.3s;
}

Comments

दृश्यता गुण के साथ समस्या यह है कि यह तत्व को छिपाता नहीं है, यह केवल इसे अदृश्य बनाता है। तो यह अभी भी जगह ले जाएगा।

— शमूएल

न केवल अदृश्य, बल्कि घटनाओं (क्लिक आदि) के लिए भी पारदर्शी। प्रदर्शन नहीं बदलने का मतलब है कि दस्तावेज़ को फिर से भरना नहीं, जो अच्छी बात है। अधिकांश तत्व जो अपारदर्शिता के माध्यम से अंदर / बाहर फीके होने चाहिए, उन्हें वैसे भी निश्चित या पूर्ण स्थिति में होना चाहिए।

— रासमस काज

Answer 4

यह काम करता है:

1. "कीफ़्रेम" परिभाषित करें:

   @-webkit-keyframes fadeIn { 
     0% { opacity: 0; }
     20% { opacity: 0; }
     40% { opacity: 0.3; }
     60% { opacity: 0.5; }
     80% { opacity: 0.9; }
     100% { opacity: 1; }
   }
   
   @keyframes fadeIn {
     0% { opacity: 0; }
     20% { opacity: 0; }
     40% { opacity: 0.3; }
     60% { opacity: 0.5; }
     80% { opacity: 0.9; }
     100% { opacity: 1; }
   }

2. "होवर" पर इस "कीफ़्रेम" का प्रयोग करें:

   div a span { 
     display: none;
   }
   
   div a:hover span {
     display: block;
   
     -webkit-animation-name: fadeIn;
     -webkit-animation-duration: 1s;
     animation-name: fadeIn;
     animation-duration: 1s;
   }

Answer 5

मैंने इसे हासिल करने के लिए इसका इस्तेमाल किया। वे मंडराना पर फीका है लेकिन छिपा, सही जब कोई जगह नहीं लेते!

.child {
    height: 0px;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in-out;
}

.parent:hover .child {
    height: auto;
    opacity: 1;
    visibility: visible;
}

Answer 6

मैं थोड़ा बदल गया लेकिन परिणाम सुंदर है।

.child {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.parent:hover child {
    width: 150px;
    height: 300px;
    opacity: .9;
}

आप सभी को धन्यवाद।

Comments

यह स्क्रीन पाठकों के साथ अच्छी तरह से नहीं खेलता है: वे सामग्री पढ़ते रहेंगे।

— एहदेव

आप होवर में visibility: hidden;/। बच्चों visibility:visible;को जोड़ सकते हैं और इससे स्क्रीन रीडर की समस्या ठीक हो

— जाएगी

Answer 7

सूचक-घटनाओं का उपयोग करके इसे प्राप्त करने का एक और अच्छा तरीका है:

.child {
    opacity: 0;
    pointer-events: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    pointer-events: all;
}

दुर्भाग्य से, यह IE10 और नीचे में समर्थित नहीं है।

Answer 8

मुझे भी यही समस्या थी। मैंने बदलावों के बजाय एनिमेशन का उपयोग करने की कोशिश की - जैसा कि @MichaelMullany और @Chris द्वारा सुझाया गया है - लेकिन यह केवल वेबकिट ब्राउज़र के लिए काम करता है, भले ही मैं "-moz" और "-o" उपसर्गों के साथ चिपकाऊं।

मैं visibilityइसके बजाय का उपयोग करके समस्या को हल करने में सक्षम था display। यह मेरे लिए काम करता है क्योंकि मेरा बाल तत्व है position: absolute, इसलिए दस्तावेज़ प्रवाह प्रभावित नहीं हो रहा है। यह दूसरों के लिए भी काम कर सकता है।

मूल कोड मेरे समाधान का उपयोग करने जैसा लगेगा:

.child {
    position: absolute;
    opacity: 0;
    visibility: hidden;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    position: relative;
    opacity: 0.9;
    visibility: visible;
}

Comments

यदि आप बच्चे को देखने के लिए पीछे हटते हैं, तो यह इस बात से अनुप्राणित होता है कि तत्व वापस छिप जाएगा। यदि आप अपने माउस को उस स्थान पर घुमा रहे हैं तो बहुत कष्टप्रद है।

— --मज

Answer 9

यदि आप जेएस के साथ बदलाव को ट्रिगर कर रहे हैं, तो क्लिक करें पर कहते हैं, एक अच्छा समाधान है।

आप समस्या देखते हैं क्योंकि एनीमेशन को प्रदर्शन पर ध्यान नहीं दिया जाता है: कोई भी तत्व नहीं है लेकिन ब्राउज़र एक ही बार में सभी परिवर्तनों को लागू करता है और तत्व कभी भी प्रदर्शित नहीं होता है: एक ही समय में एनिमेटेड नहीं होने पर ब्लॉक करें ।

चाल ब्राउज़र को दृश्यता को बदलने के बाद फ्रेम को प्रस्तुत करने के लिए पूछना है लेकिन एनीमेशन को ट्रिगर करने से पहले।

यहाँ एक JQuery का उदाहरण दिया गया है:

    $('.child').css({"display":"block"});
    //now ask the browser what is the value of the display property
    $('.child').css("display"); //this will trigger the browser to apply the change. this costs one frame render
    //now a change to opacity will trigger the animation
    $('.child').css("opacity":100);

Comments

इस प्रश्न को जावास्क्रिप्ट के साथ टैग नहीं किया गया है और न ही jQuery

— j08691

मुझे पता है, मैंने यह कारण बताने के लिए लिखा है कि यह हो रहा है। यह मेरे लिए बहुत उपयोगी था जब मुझे इस बारे में पता चला और मुझे उम्मीद है कि इससे दूसरों को भी मदद मिलेगी।

— daniel.sedlacek

Btw, अपारदर्शिता मान 0 से 1 के बीच है

— अमृत

Answer 10

निरपेक्ष या निश्चित तत्वों पर आप z-index का भी उपयोग कर सकते हैं:

.item {
    position: absolute;
    z-index: -100;
}

.item:hover {
    z-index: 100;
}

अन्य तत्वों को अब -100 और 100 के बीच एक जेड-इंडेक्स होना चाहिए।

Comments

दुर्भाग्य से type=passwordखेतों पर KeePass पासवर्ड इंडिकेटर सिंबल को पेंच करता है। इसका दृश्य नहीं है।

— दोपहर

क्या हम कृपया मनमाना z- इंडेक्स नंबरों का उपयोग करना बंद कर सकते हैं यहाँ: z-index: 1; बनाम z- इंडेक्स: -1 सिर्फ ठीक करेगा। विशाल जेड-इंडेक्स नंबर लेने से चीजें अप्राप्य हो जाती हैं।

— dudewad

Answer 11

मुझे पता है, यह वास्तव में आपके प्रश्न का समाधान नहीं है, क्योंकि आप पूछते हैं

प्रदर्शन + अस्पष्टता

मेरा दृष्टिकोण एक अधिक सामान्य प्रश्न को हल करता है, लेकिन शायद यह पृष्ठभूमि की समस्या थी जिसे displayसाथ में उपयोग करके हल किया जाना चाहिए opacity।

मेरी इच्छा थी कि जब यह दिखाई न दे तो तत्व को रास्ते से हटा दिया जाए। यह समाधान वास्तव में है कि: यह बढ़ता रहता है दूर से बाहर तत्व है, और इस संक्रमण के लिए इस्तेमाल किया जा सकता है:

.child {
  left: -2000px;
  opacity: 0;
  visibility: hidden;
  transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
}

.parent:hover .child {
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: left 0s, visibility 0s, opacity 0.8s;
}

इस कोड में कोई ब्राउज़र उपसर्ग या पिछड़े संगतता हैक शामिल नहीं हैं। यह सिर्फ इस अवधारणा को दिखाता है कि तत्व को कैसे दूर ले जाया जाता है क्योंकि इसकी किसी भी अधिक आवश्यकता नहीं है।

दिलचस्प हिस्सा दो अलग-अलग संक्रमण परिभाषाएं हैं। जब माउस-पॉइंटर उस .parentतत्व को मँडराता है जिस तत्व को .childतुरंत लगाने की आवश्यकता होती है और तब अपारदर्शिता को बदल दिया जाएगा:

transition: left 0s, visibility 0s, opacity 0.8s;

जब कोई होवर नहीं होता है, या माउस-पॉइंटर को तत्व से दूर ले जाया जाता है, तो किसी को तब तक इंतजार करना पड़ता है जब तक कि ऑप्‍शन बदलने से पहले ही ऑप्‍शन ऑफ न हो जाए।

transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;

ऑब्जेक्ट को दूर ले जाना एक मामले में एक व्यवहार्य विकल्प display:noneहोगा जहां सेटिंग लेआउट को नहीं तोड़ती है।

मुझे आशा है कि मैंने इस सवाल के लिए सिर पर नाखून मारा, हालांकि मैंने इसका जवाब नहीं दिया।

Comments

IE9 के बाद से Microsoft फ़िल्टर को हटा दिया गया है। कोई विशेष कारण जो आपको लगता है कि 2016 में उत्तर देने के लिए इसे जोड़ना चाहिए?

— टाइलर

@TylerH कितने उपयोगकर्ता तक पहुंचने के इच्छुक हैं, यह स्वाद का सवाल है।

— हेंस मॉर्गेनस्टर्न

यह माना जाता है कि यह पदावनत है , और IE <11 Microsoft द्वारा समर्थित नहीं है, और उस संपत्ति का उपयोग करना सबसे अच्छा है।

— टायलरएच

@TylerH ऐसे ग्राहकों को समायोजित करना आम है जो नए ब्राउज़र में अपग्रेड नहीं कर सकते हैं या नहीं कर सकते हैं। मेरे पास एक ग्राहक के रूप में एक प्रसिद्ध बैंक है जो अभी भी IE6 का उपयोग करता है और "कारणों" के लिए अपग्रेड करने से इनकार करता है।

— मार्कस कनिंघम

@MarcusCunningham प्रश्न को css3 के साथ टैग किया गया है जो पूरी तरह से IE6 (और IE7 और IE8) के उपयोग को रोकता है। जल्द से जल्द संभव ब्राउज़र में ओपी के लिए कोड लिख सकते थे, इस जवाब में एमएस फ़िल्टर को हटा दिया गया था। और भविष्य के पाठकों के लिए, यह और भी बेकार है क्योंकि यह भी समर्थित नहीं है। नहीं है कोई इस प्रश्न पर एक जवाब में यह भी शामिल है के लिए तर्क। हालांकि, यह एक मूट बिंदु है, क्योंकि हेंस ने पहले ही अपने जवाब से इसे हटा दिया है।

— टायलरएच

Answer 12

एक चीज जो मैंने की थी, प्रारंभिक स्थिति के मार्जिन को "मार्जिन-लेफ्ट: -9999px" की तरह सेट किया गया था, इसलिए यह स्क्रीन पर दिखाई नहीं देता है, और फिर होवर स्थिति पर "मार्जिन-लेफ्ट: 0" रीसेट करें। उस स्थिति में इसे "प्रदर्शन: ब्लॉक" रखें। क्या मेरे लिए चाल :)

संपादित करें: राज्य को सहेजें और पिछले होवर राज्य को वापस न करें? ठीक है यहाँ हमें JS की आवश्यकता है:

<style>
.hovered { 
    /* hover styles here */
}
</style>

<script type="text/javascript">
$('.link').hover(function() {
   var $link = $(this);
   if (!$link.hasclass('hovered')) { // check to see if the class was already given
        $(this).addClass('hovered');
   } 
});
</script>

Comments

अच्छा विचार है, लेकिन फिर मैं

— माउसआउट

एलेक्सिस, यह नहीं है कि आप क्या करना चाहते हैं? होवर का मतलब केवल तब होता है जब अपने माउस के साथ मँडराते हैं। कृपया स्पष्ट करें कि आप क्या हासिल करने की कोशिश कर रहे हैं।

— यहोशू

हाँ क्षमा करें। मैं माउसआउट में फीका सहेजना चाहता हूं।

— एलेक्सिस डेल्रीयू

वह सब कुछ बदल देता है। लगभग। मूल रूप से आप जो चाहते हैं, वह एक जेएस फ़ंक्शन है जो हॉवर स्थिति का पता लगाएगा, जैसा कि अन्य उपयोगकर्ताओं ने संकेत दिया है, और जोड़ें ... अच्छी तरह से ... मेरा अद्यतन उत्तर देखें।

— यहोशू

Answer 13

OnHoverIn / Out दोनों तरीकों से एनीमेशन करने के लिए मैंने यह समाधान किया। आशा है कि यह किसी की मदद करेगा

@keyframes fadeOutFromBlock {
  0% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }

  90% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }
}

@keyframes fadeInFromNone {
  0% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }

  1% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }
}

.drafts-content {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  animation: fadeInFromNone 1s ease-in;
  will-change: opacity, transform;

  &.hide-drafts {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
    animation: fadeOutFromBlock 0.5s ease-out;
    will-change: opacity, transform;
  }
}

Answer 14

सीएसएस के साथ अलग-अलग चयन कैसे करें:
यह मेरा कोड है:
सीएसएस कोड

.item {   
    height:200px;
    width:200px;
    background:red;
    opacity:0;
    transition: opacity 1s ease-in-out;
}

.item:hover {
    opacity: 1;
}
code {
    background: linear-gradient(to right,#fce4ed,#ffe8cc);
}

<div class="item">

</div>
<p><code> move mouse over top of this text</code></p>

या इस डेमो फ़ाइल की जाँच करें

फ़ंक्शन वोट () {
var वोट = getElementById ("yourOpinion")
यदि (यह.वर्कविट यू):
वोट + = 1};
जबरदस्त हंसी

Comments

क्वास का जवाब नहीं देता, क्योंकि displayसंपत्ति को बस हटा दिया गया था।

— टोस्ट

Answer 15

display:संक्रमण नहीं है। आपको संभवतः jQuery का उपयोग करने की आवश्यकता होगी जो आप करना चाहते हैं।

Comments

आपको हर जगह jQuery की वकालत करना बंद करना है।

— बेंजामिन ग्रुएनबाम

@BenjaminGruenbaum jQuery अद्भुत आदमी है। यह बहुत अच्छा है और सभी चीजें करता है।

— का घोस्ट