css - प्रदर्शन पर संक्रमण: संपत्ति




css3 css-transitions (19)

मैं वर्तमान में एक प्रकार का सीएसएस 'मेगा ड्रॉपडाउन' मेनू तैयार कर रहा हूं - मूल रूप से एक सामान्य सीएसएस-केवल ड्रॉपडाउन मेनू, लेकिन एक जिसमें विभिन्न प्रकार की सामग्री होती है।

फिलहाल, ऐसा प्रतीत होता है कि CSS3 संक्रमण 'प्रदर्शन' प्रॉपर्टी पर लागू नहीं होते हैं , यानी आप display: none से किसी प्रकार का संक्रमण नहीं कर सकते display: none display: block करने के लिए display: none display: block (या कोई संयोजन)।

क्या कोई उपर्युक्त उदाहरण से दूसरे स्तरीय मेनू के लिए एक तरीका सोच सकता है जब कोई शीर्ष स्तर मेनू आइटम में से किसी एक पर हो जाता है?

मुझे पता है कि आप visibility: पर संक्रमण का उपयोग कर सकते हैं visibility: संपत्ति, लेकिन मैं प्रभावी ढंग से इसका उपयोग करने के तरीके के बारे में सोच नहीं सकता।

मैंने ऊंचाई का उपयोग करने का भी प्रयास किया है लेकिन यह सिर्फ बुरी तरह विफल रहा है।

मुझे यह भी पता है कि जावास्क्रिप्ट का उपयोग करके इसे हासिल करना मुश्किल है, लेकिन मैं खुद को केवल सीएसएस का उपयोग करने के लिए चुनौती देना चाहता था और मुझे लगता है कि मैं थोड़ा छोटा आ रहा हूं।

सभी और किसी भी सुझाव का स्वागत है।


आखिर में position absolute साथ opacity को जोड़कर, मुझे छुपे हुए स्थान पर कब्जा नहीं करने के लिए, मेरे लिए एक समाधान मिला।

.toggle {
  opacity: 0;
  position: absolute;
  transition: opacity 0.8s;
}

.parent:hover .toggle {
  opacity: 1;
  position: static;
}

आप दो संक्रमण या अधिक को जोड़ सकते हैं, और visibility इस समय आसान है।

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}
<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

( transition संपत्ति के लिए विक्रेता उपसर्ग को मत भूलना)

इस लेख में अधिक जानकारी हैं


आप संक्रमण घटनाओं के साथ ऐसा कर सकते हैं, तो आप क्या करते हैं, आप संक्रमण के लिए 2 सीएसएस कक्षाएं बनाते हैं, एक एनीमेशन अन्य धारण करते हैं, जिसमें कोई भी स्थिति प्रदर्शित नहीं होती है। और एनीमेशन समाप्त होने के बाद आप उन्हें स्विच करते हैं? यदि मैं एक बीटीएन दबाता हूं, और दोनों वर्गों को हटा देता हूं तो मेरे मामले में मैं फिर से divs प्रदर्शित कर सकता हूं।

नीचे स्निप करने का प्रयास करें ...

$(document).ready(function() {
  //assign transition event
  $("table").on("animationend webkitAnimationEnd", ".visibility_switch_off", function(event) {
    //we check if this is the same animation we want  
    if (event.originalEvent.animationName == "col_hide_anim") {
      //after the animation we assign this new class that basically hides the elements.    
      $(this).addClass("animation-helper-display-none");
    }

  });

  $("button").click(function(event) {

    $("table tr .hide-col").toggleClass(function() {
      //we switch the animation class in a toggle fashion...
      //and we know in that after the animation end, there is will the animation-helper-display-none extra class, that we nee to remove, when we want to show the elements again, depending on the toggle state, so we create a relation between them.
      if ($(this).is(".animation-helper-display-none")) {
        //im toggleing and there is already the above classe, then what we want it to show the elements , so we remove both classes...        
        return "visibility_switch_off animation-helper-display-none";
      } else {
        //here we just want to hide the elements, so we just add the animation class, the other will be added later be the animationend event...        
        return "visibility_switch_off";
      }

    });

  });

});
table th {
  background-color: grey;
}

table td {
  background-color: white;
  padding:5px;
}

.animation-helper-display-none {
  display: none;
}

table tr .visibility_switch_off {
  animation-fill-mode: forwards;
  animation-name: col_hide_anim;
  animation-duration: 1s;
}

@-webkit-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-moz-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-o-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes col_hide_anim {
  0%   {opacity: 1;}
  100% {opacity: 0;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <theader>
    <tr>
      <th>Name</th>
      <th class='hide-col'>Age</th>
      <th>Country</th>
    </tr>
  </theader>
  <tbody>
    <tr>
      <td>Name</td>
      <td class='hide-col'>Age</td>
      <td>Country</td>
    </tr>
  </tbody>
</table>

<button>Switch - Hide Age column with fadeout animation and display none after</button>


इन उत्तरों में से कुछ और कुछ अन्य सुझावों से लेते हुए, निम्नलिखित होवर मेनू के लिए बहुत अच्छा काम करता है (मैं इसे बूटस्ट्रैप 3 के साथ उपयोग कर रहा हूं, विशेष रूप से):

nav .dropdown-menu {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 500ms, opacity 300ms;
    -webkit-transition: max-height 500ms, opacity 300ms;
}
nav .dropdown:hover .dropdown-menu {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0, opacity 300ms;
    -webkit-transition: max-height 0, opacity 300ms;
}

यदि आप height:auto बाद दोनों मान निर्दिष्ट करते हैं तो आप max-height height के स्थान पर height का उपयोग भी कर सकते हैं height:auto transition साथ height:auto की अनुमति नहीं है। max-height की होवर मान संभवतः मेनू की height से अधिक होनी चाहिए।


इसे काम करने के लिए आपको तत्व को अन्य माध्यमों से छिपाने की जरूरत है।

मैंने दोनों <div> s को व्यवस्थित करके और छिपे हुए को opacity: 0 सेट करके प्रभाव को पूरा किया opacity: 0

यदि आप display प्रॉपर्टी को none block से टॉगल none करते हैं, तो अन्य तत्वों पर आपका संक्रमण नहीं होगा।

इस के आसपास काम करने के लिए, तत्व को हमेशा display: block करने की अनुमति दें display: block , लेकिन इनमें से किसी भी माध्यम को समायोजित करके तत्व को छुपाएं:

  1. height को 0 सेट करें।
  2. opacity 0 सेट करें।
  3. तत्व को किसी अन्य तत्व के फ्रेम के बाहर स्थित करें जिसमें overflow: hidden

अधिक समाधान होने की संभावना है, लेकिन यदि आप तत्व को display: none करने के लिए टॉगल करते हैं तो आप एक संक्रमण नहीं कर सकते display: none । उदाहरण के लिए, आप इस तरह कुछ करने का प्रयास कर सकते हैं:

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0; 
}
div.active {
    opacity: 1;
    display: block;
}

लेकिन वह काम नहीं करेगा। मेरे अनुभव से, मुझे यह कुछ भी करने के लिए नहीं मिला है।

इस वजह से, आपको हमेशा तत्व display: block को रखने की आवश्यकता होगी display: block - लेकिन आप इस तरह कुछ करने के द्वारा इसे प्राप्त कर सकते हैं:

div {
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

कोई जावास्क्रिप्ट आवश्यक नहीं है, और कोई अपमानजनक विशाल अधिकतम ऊंचाई की आवश्यकता नहीं है। इसके बजाय, अपने टेक्स्ट तत्वों पर अपनी अधिकतम ऊंचाई सेट करें, और एक रिमोट रिलेशनशिप इकाई जैसे कि रीम या एम का उपयोग करें। इस तरह, आप मेनू में बंद होने पर देरी से बचने या "पॉपिंग" से बचते समय अधिकतम कंटेनर से अधिकतम ऊंचाई सेट कर सकते हैं:

एचटीएमएल

<nav>
  <input type="checkbox" />
  <ul>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
  </ul>
</nav>

सीएसएस

nav input + ul li { // notice I set max-height on li, not ul
   max-height: 0;
}

nav input:checked + ul li {
   max-height: 3rem; // a little bigger to allow for text-wrapping - but not outrageous
}

यहां एक उदाहरण देखें: http://codepen.io/mindfullsilence/pen/DtzjE


डिस्प्ले का उपयोग करने के बजाय आप तत्व को 'ऑफ़-स्क्रीन' स्टोर कर सकते हैं जब तक आपको इसकी आवश्यकता न हो, फिर अपनी स्थिति को उस स्थान पर सेट करें जहां आप इसे चाहते हैं और इसे एक ही समय में बदल दें। यह हालांकि अन्य डिजाइन मुद्दों का एक पूरा मेजबान लाता है, तो ymmv। आप शायद वैसे भी प्रदर्शन का उपयोग नहीं करना चाहेंगे, क्योंकि आप चाहते हैं कि सामग्री स्क्रीन पाठकों के लिए पहुंच योग्य हो, जो अधिकांश भाग दृश्यता के लिए नियमों का पालन करने का प्रयास करें - यानी, यदि यह आंखों को दिखाई नहीं देनी चाहिए, यह एजेंट को सामग्री के रूप में दिखाई नहीं देगा।


मुझे कई उत्तरों के साथ एक प्रश्न का जवाब देने में लगभग बुरा लगता है, लेकिन इस समाधान में उत्कृष्ट संगतता है और मैंने इसे अभी तक नहीं देखा है:

.hidden-element {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity .5s ease-out;
}

.hidden-element.visible {
  position: static;
  z-index: auto;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

स्पष्टीकरण : यह visibility: hidden का उपयोग करता है visibility: hidden चाल (जो एक चरण में "शो-एंड-एनिमेट" के साथ संगत है) लेकिन संयोजन position: absolute; z-index: -1; pointer-events: none; का उपयोग करती है position: absolute; z-index: -1; pointer-events: none; position: absolute; z-index: -1; pointer-events: none; यह सुनिश्चित करने के लिए कि छुपा कंटेनर अंतरिक्ष नहीं लेता है और उपयोगकर्ता इंटरैक्शन का जवाब नहीं देता है


मुझे लगता है कि सलमानपीके का सबसे नज़दीकी उत्तर है, यह निम्नलिखित सीएसएस एनिमेशन के साथ एक आइटम को बाहर या बाहर फीका करता है। हालांकि प्रदर्शन संपत्ति आसानी से, अस्पष्टता को एनिमेट नहीं करती है।

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@-webkit-keyframes fadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}

यदि आप डिस्प्ले ब्लॉक से किसी भी को प्रदर्शित करने के लिए तत्व को एनिमेट करना चाहते हैं, तो मैं नहीं देख सकता कि यह वर्तमान में सीएसएस के साथ संभव है, आपको ऊंचाई कम करने और ऊंचाई कम करने के लिए सीएसएस एनीमेशन का उपयोग करना होगा। यह नीचे दिए गए उदाहरण में दिखाए गए सीएसएस के साथ संभव है, लेकिन तत्व के लिए एनिमेट करने के लिए आपको आवश्यक सटीक ऊंचाई मानों को जानना मुश्किल होगा।

jsFiddle उदाहरण

सीएसएस

@-webkit-keyframes pushDown {
  0% {
    height: 10em;
  }
  25% {
    height: 7.5em;
  }
  50% {
    height: 5em;
  }
  75% {
    height: 2.5em;
  }
  100% {
    height: 0em;
  }
}

.push-down {
    -webkit-animation: pushDown 2s forwards linear;
}

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

var element = document.getElementById("element");

// push item down
element.className = element.className + " push-down";

मुझे संदेह है कि अगर "डिस्प्ले" बदल दिया गया है तो संक्रमण को अक्षम कर दिया गया है क्योंकि वास्तव में कौन सा प्रदर्शन करता है। यह ऐसी चीज को नहीं बदलेगा जो आसानी से एनिमेटेड हो सकता है।

"प्रदर्शन: कोई नहीं;" और "दृश्यता: छुपा;" दो पूरी तरह से अलग चीजें हैं। दोनों तत्वों को अदृश्य बनाने का प्रभाव रखते हैं, लेकिन "दृश्यता: छुपा;" के साथ यह अभी भी लेआउट में प्रस्तुत किया गया है, लेकिन यह स्पष्ट रूप से ऐसा नहीं है। छुपा तत्व अभी भी अंतरिक्ष लेता है, और अभी भी इनलाइन या ब्लॉक या ब्लॉक-इनलाइन या टेबल के रूप में या जो भी "डिस्प्ले" तत्व इसे प्रस्तुत करने के लिए कहता है, और तदनुसार स्थान लेता है। अन्य तत्व स्वचालित रूप से उस स्थान पर कब्जा करने के लिए नहीं जाते हैं। छुपा तत्व सिर्फ आउटपुट में अपने वास्तविक पिक्सल प्रस्तुत नहीं करता है।

दूसरी तरफ "डिस्प्ले: कोई नहीं" वास्तव में तत्व को पूरी तरह से प्रस्तुत करने से रोकता है। यह कोई लेआउट स्पेस नहीं लेता है। इस तत्व द्वारा उठाए गए कुछ या सभी स्थानों पर कब्जा कर लिया गया अन्य तत्व अब उस स्थान पर कब्जा करने के लिए समायोजित करते हैं, जैसे कि तत्व बिल्कुल अस्तित्व में नहीं था

"प्रदर्शन" सिर्फ एक और दृश्य विशेषता नहीं है। यह तत्व के पूरे प्रतिपादन मोड को स्थापित करता है, जैसे कि यह एक ब्लॉक, इनलाइन, इनलाइन-ब्लॉक, टेबल, टेबल-पंक्ति, टेबल-सेल, सूची-वस्तु, या जो भी हो! उनमें से प्रत्येक के पास बहुत अलग लेआउट रैमिकेशंस हैं, और उन्हें एनिमेट करने या आसानी से संक्रमण करने का कोई उचित तरीका नहीं होगा (उदाहरण के लिए "ब्लॉक" से "इनलाइन" या इसके विपरीत, एक चिकनी संक्रमण की कल्पना करने का प्रयास करें!)।

यही कारण है कि यदि प्रदर्शन में परिवर्तन होता है तो संक्रमण अक्षम होते हैं (भले ही परिवर्तन "कोई नहीं" या "कोई नहीं" न केवल अदृश्यता है, यह इसका स्वयं का तत्व प्रतिपादन मोड है जिसका अर्थ है कि कोई प्रतिपादन नहीं है!),


मेरा साफ जावास्क्रिप्ट चाल पूरे परिदृश्य को दो अलग-अलग कार्यों में अलग करना है !

चीजों को तैयार करने के लिए, एक वैश्विक चर घोषित किया जाता है और एक ईवेंट हैंडलर परिभाषित किया जाता है:

  var tTimeout;
  element.addEventListener("transitionend", afterTransition, true);//firefox
  element.addEventListener("webkitTransitionEnd", afterTransition, true);//chrome

फिर, तत्व छुपाते समय, मैं इस तरह कुछ उपयोग करता हूं:

function hide(){
  element.style.opacity = 0;
}

function afterTransition(){
  element.style.display = 'none';
}

तत्व को फिर से प्रकट करने के लिए, मैं ऐसा कुछ कर रहा हूं:

function show(){
  element.style.display = 'block';
  tTimeout = setTimeout(timeoutShow, 100);
}

function timeoutShow(){
  element.style.opacity = 1;
}

यह अब तक काम करता है!


मैं इस position: fixed आज एक position: fixed साथ भाग गया position: fixed मोडल जिसे मैं पुन: उपयोग कर रहा था। मैं इसे display: none नहीं कर सका display: none और फिर इसे एनिमेट कर सकता है, क्योंकि यह सिर्फ उपस्थिति में कूद गया है, और z-index (नकारात्मक मान, आदि) ने अजीब चीजें भी की हैं।

मैं height: 0 का उपयोग भी कर रहा था height: 0 से height: 100% , लेकिन यह केवल तब काम करता था जब मोडल दिखाई देता था। यह वही है जैसे आपने left: -100% या कुछ का उपयोग किया था।

फिर उसने मुझे मारा कि एक साधारण जवाब था। एट वॉयला:

सबसे पहले, आपका छुपा मोडल। ध्यान दें कि height 0 , और संक्रमण में height घोषणा की जांच करें ... इसमें 500ms , जो मेरे opacity संक्रमण से अधिक लंबा है । याद रखें, यह बाहर जाने वाले फीड-आउट संक्रमण को प्रभावित करता है: मोडल को इसके डिफ़ॉल्ट स्थिति में वापस कर रहा है।

#modal-overlay {
    background: #999;
    background: rgba(33,33,33,.2);
    display: block;
    overflow: hidden;
    height: 0;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    -webkit-transition: height 0s 500ms, opacity 300ms ease-in-out;
       -moz-transition: height 0s 500ms, opacity 300ms ease-in-out;
            -ms-transition: height 0s 500ms, opacity 300ms ease-in-out;
         -o-transition: height 0s 500ms, opacity 300ms ease-in-out;
        transition: height 0s 500ms, opacity 300ms ease-in-out;
}

दूसरा, आपका दृश्यमान मोडल। मान लें कि आप body लिए एक .modal-active सेट कर रहे हैं। अब height 100% , और मेरा संक्रमण भी बदल गया है। मैं चाहता हूं कि height तुरंत बदल दी जाए, और 300ms लेने की opacity

.modal-active #modal-overlay {
    height: 100%;
    opacity: 1;
    z-index: 90000;
    -webkit-transition: height 0s, opacity 300ms ease-in-out;
       -moz-transition: height 0s, opacity 300ms ease-in-out;
        -ms-transition: height 0s, opacity 300ms ease-in-out;
         -o-transition: height 0s, opacity 300ms ease-in-out;
            transition: height 0s, opacity 300ms ease-in-out;
}

यही वह है, यह एक आकर्षण की तरह काम करता है।


संपादित करें: प्रदर्शित करें इस उदाहरण में कोई भी लागू नहीं किया जा रहा है।

@keyframes hide {
  0% {
    display: block;
    opacity: 1;
  }
  99% {
    display: block;
  }
  100% {
    display: none;
    opacity: 0;
  }
}

ऊपर क्या हो रहा है यह है कि 99% एनीमेशन डिस्प्ले ब्लॉक करने के लिए सेट है जबकि अस्पष्टता समाप्त हो जाती है। आखिरी पल में प्रदर्शन संपत्ति किसी के लिए सेट नहीं है।

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

.hide {
   animation: hide 1s linear;
   animation-fill-mode: forwards;
}

यहां दो उदाहरण दिए गए हैं: https://jsfiddle.net/qwnz9tqg/3/


समस्या का सबसे सरल सार्वभौमिक समाधान यह है: display:none निर्दिष्ट करने के लिए स्वतंत्र महसूस करें display:none आपके सीएसएस में display:none , हालांकि आप इसे जावास्क्रिप्ट का उपयोग करके block (या जो कुछ भी) में बदल देंगे, और फिर आपको अपने तत्व में एक कक्षा भी जोड़नी होगी सवाल में वास्तव में setTimeout () के साथ संक्रमण करता है। बस इतना ही।

अर्थात:

<style>
#el {
    display: none;
    opacity: 0;
}
#el.auto-fade-in {
    opacity: 1;
    transition: all 1s ease-out; /* future, future, please come sooner! */
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
}
</style>

<div id=el>Well, well, well</div>

<script>
var el = document.getElementById('el');
el.style.display = 'block';
setTimeout(function () { el.className = 'auto-fade-in' }, 0);
</script>

नवीनतम सेन ब्राउज़रों में परीक्षण किया। स्पष्ट रूप से IE9 या इससे पहले में काम नहीं करना चाहिए।


display उन गुणों में से एक नहीं है जो संक्रमण पर काम करता है।

http://www.w3.org/TR/css3-transitions/#animatable-properties- उन गुणों की सूची के लिए देखें जिन्हें उनके लिए लागू संक्रमण हो सकते हैं।


overflow:hidden बदलें overflow:hidden लिए overflow:hidden overflow:visible । यह बेहतर काम करता है। मैं इस तरह उपयोग करता हूं:

#menu ul li ul {
    background-color:#fe1c1c;
    width:85px;
    height:0px;
    opacity:0;
    box-shadow:1px 3px 10px #000000;
    border-radius:3px;
    z-index:1;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.6s ease;
}

#menu ul li:hover ul  {
    overflow:visible;
    opacity:1;
    height:140px;
}

visible बेहतर है क्योंकि overflow:hidden कार्य बिल्कुल एक display:none तरह display:none


It can be handle by using transition timing functions step-end and step-start

For example: https://jsfiddle.net/y72h8Lky/

$(".run").on("click", function() {
    $(".popup").addClass("show");
});
$(".popup").on("click", function() {
    $(".popup").removeClass("show");
})
.popup {
    opacity: 0;
    display: block;
    position: absolute;
    top: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1450;
    background-color: rgba(0, 175, 236, 0.6);
    transition: opacity 0.3s ease-out, top 0.3s step-end;
}
.popup.show {
    transition: opacity 0.3s ease-out, top 0.3s step-start;
    opacity: 1;
    top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup"></div>
<button class="run" style="font-size: 24px;">Click on me</button>


There is a alternate solution with css animation for drop-down hidden:

.dropdown{   
  position: relative;
  width: 100%;
 -webkit-animation-name: animatetop;
 -webkit-animation-duration: 0.4s;
 animation-name: animatetop;
 animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
 from {top:-300px; opacity:0} 
 to {top:0; opacity:1}
}

@keyframes animatetop {
 from {top:-300px; opacity:0}
 to {top:0; opacity:1}
}

you can also use this:

.dropdown {
height: 0px;
width: 0px;
opacity: .0;
color: white;
}
.dropdown:hover {
height: 20px;
width: 50px;
opacity: 1;
transition: opacity 200ms;
/* Safari */
-webkit-transition: opacity 200ms;
}






css-transitions