सीएसएस संक्रमण

Question

के साथ div div मैं होवर पर एक छिपा div प्रदर्शित करने के लिए निम्नलिखित कोड का उपयोग कर रहा हूँ। मैं छुपा div में फीका करने के लिए सीएसएस transition संपत्ति का उपयोग कर रहा हूं। क्या सीएसएस का उपयोग करने में लुप्त होने के बजाय छिपे हुए स्लाइड (उदाहरण के लिए बाएं से दाएं) div में स्लाइड करना संभव है? यहाँ मेरी कोड है:

एचटीएमएल

<div class="box"> 
    <a href="#"><img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"></a> 
    <div class="hidden"></div> 
</div> 

सीएसएस

.box{ 
    position: relative;  
} 

.box .hidden{  
    background: yellow; 
    height: 300px;  
    position: absolute; 
    top: 0; 
    left: 0;  
    width: 500px; 
    opacity: 0;  
    transition: all 1s ease; 
} 

.box:hover .hidden{ 
    opacity: 1; 
} 

डेमो: http://jsfiddle.net/u2FKM/

Answer 1

ऐसा कुछ?

DEMO

और कोड मैं प्रयोग किया है:

.box{ 
    position: relative; 
    overflow: hidden; 
} 

.box:hover .hidden{ 

    left: 0px; 
} 

.box .hidden {  
    background: yellow; 
    height: 300px;  
    position: absolute; 
    top: 0; 
    left: -500px;  
    width: 500px; 
    opacity: 1;  
    -webkit-transition: all 0.7s ease-out; 
     -moz-transition: all 0.7s ease-out; 
     -ms-transition: all 0.7s ease-out; 
     -o-transition: all 0.7s ease-out; 
      transition: all 0.7s ease-out; 
} 

मैं भी जोड़ सकते हैं कि यह जो इस मामले में कुछ इस तरह काम कर सकता था transform: translate();, का उपयोग कर एक elment स्थानांतरित करने के लिए संभव है - DEMO nr2

Answer 2

हाँ कि संभव है, लेकिन सभी ब्राउज़रों द्वारा समर्थित नहीं है।

w3schools

Answer 3

transition-property:width; 

यह काम करना चाहिए देखें। आपके पास ब्राउज़र आश्रित कोड

Answer 4

मैंने विक्रेता उपसर्ग जोड़ दिए हैं, और एनीमेशन को all में बदल दिया है, इसलिए आपके पास एनिमेटेड और चौड़ाई दोनों एनिमेटेड हैं।

क्या आप यह देख रहे हैं? http://jsfiddle.net/u2FKM/3/

Answer 5

यह आपके लिए अच्छा समाधान हो सकता है: इस बहुत छोटे बदलाव की तरह कोड बदलें

.box{ 
    position: relative; 
} 
.box:hover .hidden{ 
    opacity: 1; 
    width:500px; 
} 
.box .hidden{ 
    background: yellow; 
    height: 334px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 0; 
    opacity: 0; 
    transition: all 1s ease; 
} 

demo here

Answer 6

बस मेरे जवाब जोड़ने के लिए देखें, ऐसा लगता है कि संक्रमण एनीमेशन प्रबंधन करने में सक्षम होने के लिए सीएसएस गुण के भीतर प्रारंभिक मान और अंतिम मूल्यों पर आधारित होने की जरूरत है।

.box{ 
 
    position: relative; 
 
    top:0px; 
 
    left:0px; 
 
    width:0px; 
 
} 
 

 
.box:hover .hidden{ 
 
    opacity: 1; 
 
    width: 500px; 
 
} 
 

 
.box .hidden{  
 
    background: yellow; 
 
    height: 300px;  
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px;  
 
    width: 0px; 
 
    opacity: 0;  
 
    transition: all 1s ease; 
 
}

<div class="box"> 
 

 
    <a href="#"> 
 
     <img src="http://farm9.staticflickr.com/8207/8275533487_5ebe5826ee.jpg"></a> 
 
     <div class="hidden"></div> 
 

 
</div>

http://jsfiddle.net/u2FKM/2199/