css3 स्लाइडअप स्लाइड नीचे

Question

मैं सीएसएस संक्रमण के साथ तत्व कैसे शैलीबद्ध करूं ताकि छिपे हुए यह ऊपर/नीचे/बाएं/दाएं स्लाइड हो जाए?

.hideUp { 
    transition: .5s; 
    display:none; 
} 
.hideLeft { 
    transition: .5s; 
    display:none; 
} 

मैं कक्षा को किसी तत्व में जोड़ना चाहता हूं और इसे स्लाइड छोड़कर गायब हो जाना चाहता हूं। धन्यवाद!

Answer 1

आप प्रदर्शन का उपयोग नहीं कर सकते: संक्रमण के साथ कोई भी नहीं। यह संक्रमण को एनिमेट किए बिना बस एक राज्य से दूसरी स्थिति में कूदने का कारण बन जाएगा।

यह पहेली तत्व को स्थानांतरित करने के लिए शीर्ष का उपयोग करती है। यह एनिमेट करता है। http://jsfiddle.net/R8zca/4/

यह धुंध प्रदर्शन का उपयोग करता है: कोई नहीं। यह एनिमेट नहीं करता है। http://jsfiddle.net/R8zca/5/

यदि आप छुपा तत्व को एनिमेट करना चाहते हैं तो आप जेड-इंडेक्स, अस्पष्टता, स्थिति या दृश्यता का उपयोग कर सकते हैं। यहां एनिमेटेबल गुणों की सूची दी गई है: http://www.w3.org/TR/css3-transitions/#animatable-properties-

Answer 2

आप निम्नलिखित लेख जो सामग्री रपट क़ौम शामिल जाँच करना चाहते हो सकता है:

Using CSS3 Transitions, Transforms and Animation

Answer 3

आप एक से अधिक ब्राउज़र विशिष्ट संपत्ति का उपयोग करना होगा (moz-संक्रमण, वेबकिट-संक्रमण ...)

उनके उपयोग का तरीका का एक अच्छा व्याख्या है: https://developer.mozilla.org/en/CSS/CSS_transitions

अपने मामले कि +०१२३०४७३६० की तरह कुछ हो जाएगा के लिए

.showUp { 
    transition:height .5s; 
    height:50px; 
    overflow:hidden; 
} 
.showLeft { 
    transition:width .5s; 
    width:0px 
    overflow:hidden; 
} 
.showUp.hideUp { 
    height:0px 
} 
.showLeft.hideLeft { 
    width:50px 
} 

और hideUp और hideLeft वर्गों टॉगल एक संक्रमण करना है।