बाएं -> दाएं और ऊपर के बीच सीएसएस संक्रमण -> नीचे की स्थिति

Question

क्या left: 0px से right: 0px के रूप में स्थिति सेट के बीच कुछ एनिमेट करने के लिए सीएसएस संक्रमण का उपयोग करना संभव है, तो यह स्क्रीन पर सभी तरह से जाता है? मुझे वही चीज़ ऊपर से नीचे तक पूरा करने की ज़रूरत है। क्या मैं स्क्रीन चौड़ाई/वस्तु-आकार की गणना कर रहा हूं?

#nav { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 50px; 
    height: 50px; 
    -webkit-transition: all 0.5s ease-out; 
} 

.moveto { 
    top: 0px; 
    right: 0px; 
} 

और फिर मैं उपयोग jQuery के .addClass

Answer 1

आप (दाएं ऊपर, नीचे, बाएँ,) एनिमेटेड तत्व आप स्थिति चेतन कर सकते हैं की चौड़ाई/ऊंचाई पता है और फिर इसी मार्जिन घटाना है।

​.animate { 
    height: 100px; 
    width: 100px; 
    background-color: #c00; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
    position: absolute; 
    left: 0; /*or bottom, top, right*/ 
} 

और फिर स्थिति के आधार पर चेतन ...

.animate.move { 
    left: 100%; /*or bottom, top, right*/ 
    margin-left: -100px; /*or bottom, top, right */ 
} 

इस कार्यान्वयन शायद transform: translate(x,y) साथ चिकनी होगा, लेकिन मैं इसे इस तरह रखेंगे, जिससे इसे और अधिक समझ में आता है।

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

Answer 2

इससे क्रोमियम पर मेरे लिए काम किया। अनुवाद के लिए% उस तत्व के बाध्यकारी बॉक्स के आकार के संदर्भ में है, जिस पर इसे लागू किया गया है, ताकि यह उस स्थान को निर्दिष्ट करने के लिए उपयोग की जाने वाली संपत्ति को स्विच करने के दौरान पूरी तरह दाएं किनारे पर तत्व प्राप्त हो।

topleft { 
    top: 0%; 
    left: 0%; 
} 
bottomright { 
    top: 100%; 
    left: 100%; 
    -webkit-transform: translate(-100%,-100%); 
} 

Answer 3

(IE 10+ सहित) अब आप calc() उपयोग कर सकते हैं और अधिक आधुनिक ब्राउज़रों में:

.moveto { 
    top: 0px; 
    left: calc(100% - 50px); 
}