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




css3 css-transitions (24)

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

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

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

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

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

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

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


Answers

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

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

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

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

I started an open source skeleton project called Toggle Display Animate

https://marcnewton.github.io/Toggle-Display-Animate/

This skeleton helper will allow you to easily mimic jQuery show/hide but with in/out CSS3 transition animations.

It uses class toggles so you can use any css methods you want on elements besides display:none|block|table|inline etc as well as other alternate uses that can be thought up.

Its main design purpose is for element toggle states, it supports a revert state where hiding the object allows you to run your keyframe in reverse or play an alternate animation for hiding the element.

Most of the markup for the concept I am working on is CSS, there is very little javascript actually used.

There is a demo here: http://marcnewton.co.uk/projects/toggle-display-animate/


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

@-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";

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>


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

एचटीएमएल

<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। आप शायद वैसे भी प्रदर्शन का उपयोग नहीं करना चाहेंगे, क्योंकि आप चाहते हैं कि सामग्री स्क्रीन पाठकों के लिए पहुंच योग्य हो, जो अधिकांश भाग दृश्यता के लिए नियमों का पालन करने का प्रयास करें - यानी, यदि यह आंखों को दिखाई नहीं देनी चाहिए, यह एजेंट को सामग्री के रूप में दिखाई नहीं देगा।


आप संक्रमण घटनाओं के साथ ऐसा कर सकते हैं, तो आप क्या करते हैं, आप संक्रमण के लिए 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>


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

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

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

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


You can get this to work the natural way you expected - using display - but you have to throttle the browser to get it to work, using either JS or as others have suggested a fancy trick with one tag inside another. I don't care for the inner tag as it further complicates CSS and dimensions, so here's the JS solution:

https://jsfiddle.net/b9chris/hweyecu4/1/

Starting with a box like:

<div class="box hidden">Lorem</div>

A hidden box. You can have it transition on click with:

function toggleTransition() {
  var el = $("div.box1");

  if (el.length) {
    el[0].className = "box";
    el.stop().css({maxWidth: 10000}).animate({maxWidth: 10001}, 2000, function() {    
        el[0].className = "box hidden";
    });
  } else {
    el = $("div.box");
    el[0].className = "box";
    el.stop().css({maxWidth: 10001}).animate({maxWidth: 10000}, 50, function() {    
        el[0].className = "box box1";
    });
  }

  return el;
}

someTag.click(toggleTransition);

The CSS is what you'd guess:

.hidden {
  display: none;
}
.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 20px;
    top: 20px;
    position: absolute;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: scale(.2);
    transform: scale(.2);
  -webkit-transition: transform 2s;
  transition: transform 2s;
}
.box1{
    -webkit-transform: scale(1);
    transform: scale(1);
}

The key is throttling the display property. By removing the hidden class then waiting 50ms, then starting the transition via the added class, we get it to appear and then expand like we wanted, instead of it just blipping onto the screen without any animation. Similar occurs going the other way, except we wait till the animation is over before applying hidden.

Note: I'm abusing .animate(maxWidth) here to avoid setTimeout race conditions. setTimeout is quick to introduce hidden bugs when you or someone else picks up code unaware of it. .animate() can easily be killed with .stop() . I'm just using it to put a 50ms or 2000ms delay on the standard fx queue where it's easy to find/resolve by other coders building on top of this.


आप दो संक्रमण या अधिक को जोड़ सकते हैं, और 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 संपत्ति के लिए विक्रेता उपसर्ग को मत भूलना)

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


इन उत्तरों में से कुछ और कुछ अन्य सुझावों से लेते हुए, निम्नलिखित होवर मेनू के लिए बहुत अच्छा काम करता है (मैं इसे बूटस्ट्रैप 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 से अधिक होनी चाहिए।


मैं इस 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;
}

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


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

आप बस सीएसएस दृश्यता का उपयोग कर सकते हैं : प्रदर्शन के बजाय छुपा / दृश्य: कोई भी / ब्लॉक नहीं

div {
    visibility:hidden;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
}

parent:hover > div {
    opacity: 1;
    visibility: visible;
}

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

@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/


मैं इस मुद्दे पर कई बार आया हूं और अब बस इसके साथ चला गया:

.block {
  opacity: 1;
  transition: opacity 250ms ease;
}

.block--invisible {
  pointer-events: none;
  opacity: 0;
}

कक्षा block--invisible जोड़कर block--invisible पूरे तत्व क्लिक करने योग्य नहीं होंगे लेकिन इसके पीछे के सभी तत्व pointer-events:none जो सभी प्रमुख ब्राउज़रों द्वारा समर्थित pointer-events:none है।


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

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


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

मैंने दोनों <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;
}

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

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

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

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

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


समस्या का सबसे सरल सार्वभौमिक समाधान यह है: 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 या इससे पहले में काम नहीं करना चाहिए।


गिलर्मो से स्वीकृत उत्तर के बाद सीएसएस संक्रमण लिखा गया था 3 अप्रैल 2012 के स्पेक ने दृश्यता संक्रमण के व्यवहार को बदल दिया और अब संक्रमण की देरी के उपयोग के बिना, इस समस्या को कम तरीके से हल करना संभव है :

.myclass > div { 
                   transition:visibility 1s, opacity 1s; 
                   visibility:hidden;  opacity:0
               }
.myclass:hover > div 
               {   visibility:visible; opacity:1 }

दोनों संक्रमणों के लिए निर्दिष्ट रन टाइम आमतौर पर समान होना चाहिए (हालांकि दृश्यता के लिए थोड़ा लंबा समय कोई समस्या नहीं है)। चल रहे संस्करण के लिए, मेरे ब्लॉग http://www.taccgl.org/blog/css-transition-visibility.html#visibility-opacity

प्रश्न का शीर्षक "प्रदर्शन पर संक्रमण: संपत्ति" और रुई मार्क्स और जोश से स्वीकार्य उत्तर में टिप्पणियों के जवाब में: यह समाधान उन मामलों में काम करता है जहां प्रदर्शन या दृश्यता संपत्ति का उपयोग किया जाता है, तो यह अप्रासंगिक है (जैसा कि संभवतः इस सवाल में मामला था)। यह तत्व को पूरी तरह से डिस्प्ले के रूप में नहीं हटाएगा: कोई भी नहीं, इसे अदृश्य बनाएं लेकिन यह अभी भी दस्तावेज़ प्रवाह में रहता है और निम्न तत्वों की स्थिति को प्रभावित करता है। संक्रमण जो पूरी तरह से प्रदर्शन के समान तत्व को हटाते हैं: ऊंचाई का उपयोग करके कोई भी नहीं किया जा सकता है (जैसा कि अन्य उत्तरों और टिप्पणियों द्वारा इंगित किया गया है), अधिकतम ऊंचाई, या मार्जिन-टॉप / नीचे, लेकिन यह भी देखें कि मैं ऊंचाई कैसे बदल सकता हूं: 0; ऊंचाई तक: ऑटो; सीएसएस का उपयोग कर? और मेरा ब्लॉग http://www.taccgl.org/blog/css_transition_display.html

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


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


आप बस उपयोग करते हैं: resize: none; आपके सीएसएस में

आकार बदलने वाली संपत्ति निर्दिष्ट करती है कि उपयोगकर्ता द्वारा तत्व का आकार बदलना है या नहीं।

नोट: आकार बदलने वाली संपत्ति उन तत्वों पर लागू होती है जिनकी गणना की गई ओवरफ्लो मान "दृश्यमान" के अलावा कुछ और है।

इस समय आईई में समर्थित नहीं है का आकार बदलें

आकार बदलने के लिए यहां विभिन्न गुण दिए गए हैं:

कोई आकार नहीं:

textarea { 
  resize: none; 
}

दोनों तरीकों का आकार बदलें (लंबवत और क्षैतिज):

textarea { 
  resize: both; 
}

लंबवत आकार बदलें:

textarea { 
  resize: vertical; 
}

क्षैतिज आकार बदलें:

textarea { 
  resize: horizontal; 
}

यदि आपके सीएसएस या एचटीएमएल में width और height है, तो यह व्यापक ब्राउज़र समर्थन के साथ आपके टेक्स्टरेरा का आकार बदल जाएगा।





css css3 css-transitions