क्या मैं सीएसएस संक्रमण के साथ पूर्ण स्थान तत्व को एनिमेट कर सकता हूं?

मैं सीएसएस संक्रमण के साथ एक तत्व की स्थिति को बदलने के लिए चेतन करना चाहते हैं, लेकिन यह भी जब मैं all गुणों पर संक्रमण का उपयोग, उदाहरण के लिए यहाँ के रूप में काम नहीं कर रहा: http://jsfiddle.net/yFy5n/3/क्या मैं सीएसएस संक्रमण के साथ पूर्ण स्थान तत्व को एनिमेट कर सकता हूं?

हालांकि, मैं अपने अंतिम समाधान नहीं करना चाहते सभी गुणों में संक्रमण लागू करने के लिए, बल्कि केवल स्थिति में परिवर्तन पर। तो रंग परिवर्तन तत्काल होना चाहिए, केवल बाएं से दाएं स्थिति में परिवर्तन एनिमेटेड होना चाहिए (अब क्या हो रहा है इसके विपरीत)।

स्रोत

2014-07-26 Digital Ninja

के बजाय transition:margin 1s linear; में बदला जाना चाहिए क्योंकि किसी ने इसका उल्लेख नहीं किया है: 'बाएं 'संपत्ति' ऑटो 'पर डिफ़ॉल्ट है। यदि प्रारंभ या समाप्ति बिंदुओं में से कोई एक मान है तो संक्रमण कभी भी काम नहीं करेगा। दोनों को परिभाषित किया जाना है। नीचे दिए गए उत्तर में मार्जिन समाधान क्यों काम करता है क्योंकि मार्जिन के सभी चार पक्ष डिफ़ॉल्ट रूप से '0' तक हैं, इसलिए इसमें पहले से निर्धारित परिभाषित मान सेट है। – animuson

@animuson Yup। किसी ने सभी टिप्पणियों को मंजूरी दे दी है, लेकिन आप [यहां] देख सकते हैं (http://stackoverflow.com/questions/24973176/can-i-animate-absolute-positioned-element-with-css-transition#comment38819970_24973194) कि मूल ओपी संस्करण क्रोम के पहले संस्करण पर काम करता था, बहुत अजीब। – Shomz

आप left के लिए डिफ़ॉल्ट मान को परिभाषित करना भूल गए हैं, इसलिए यह नहीं पता कि कैसे एनिमेट करना है।

.test { 
    left: 0; 
    transition:left 1s linear; 
}

यहाँ देखें: http://jsfiddle.net/shomz/yFy5n/5/

स्रोत

2014-07-26 16:36:31 Shomz

अधिक संगतता के लिए आप जेएस $ ('# test') का उपयोग कर सकते हैं। एनिमेट ({'बाएं': 60}); –

@Shomz: धन्यवाद दोस्त। यकीन नहीं है कि यह मेरे लिए कैसे काम कर रहा है (?!)। मैं विंडोज – Harry

के साथ क्रोम v24 पर हूं धन्यवाद (मुझे उम्मीद है कि यह डिफ़ॉल्ट बाएं मान लेगा, इसलिए मैंने इसे स्वयं परिभाषित करने के लिए कभी नहीं सोचा था); हालांकि, रंग बदलने के लिए केवल स्थिति को पाने के लिए मुझे क्या परिवर्तन करना चाहिए? –

इस प्रयास करें:

.test { 
    position:absolute; 
    background:blue; 
    width:200px; 
    height:200px; 
    top:40px; 
    transition:left 1s linear; 
    left: 0; 
}

स्रोत

2014-07-26 16:39:35 qbit

क्या आप "यह" काम करने जा रहे हैं, इस पर थोड़ा सा विस्तार कर सकते हैं? इससे भविष्य में किसी और के लिए यह उत्तर उपयोगी होगा जो एक जैसी समस्या है लेकिन बिल्कुल वही नहीं है। –

कृपया इस कोड left:60px

के बजाय margin-left:60px प्रयास करें कृपया एक बार देख ले: http://jsfiddle.net/hbirjand/2LtBh/2/

@Shomz के रूप में कहा, transitio n

स्रोत

2014-07-26 16:39:41 Hbirjand

यकीन नहीं है कि किसी ने इसे क्यों कम किया। यह 'बाएं' बग को ठीक से बचाता है। मुझसे +1 Btw। चूंकि ओपी केवल स्थिति शिफ्ट चाहता है, संक्रमण को 'मार्जिन' में संशोधित किया जा सकता है: http://jsfiddle.net/shomz/2LtBh/1/ – Shomz

क्या मैं सीएसएस संक्रमण के साथ पूर्ण स्थान तत्व को एनिमेट कर सकता हूं?

उत्तर

संबंधित मुद्दे