CSS संक्रमण ऊपर, नीचे, बाएँ, दाएँ के साथ काम नहीं करता है

Question

मेरे पास स्टाइल वाला एक तत्व है

position: relative;
transition: all 2s ease 0s;

फिर मैं उस पर क्लिक करने के बाद अपनी स्थिति को सुचारू रूप से बदलना चाहता हूं, लेकिन जब मैं शैली में बदलाव करता हूं तो संक्रमण नहीं होता है, इसके बजाय तत्व तुरंत चलता है।

$$('.omre')[0].on('click',function(){
    $$(this).style({top:'200px'});
});

हालांकि अगर मैं colorउदाहरण के लिए संपत्ति को बदलता हूं , तो यह आसानी से बदल जाती है।

$$('.omre')[0].on('click',function(){
    $$(this).style({color:'red'});
});

इसका कारण क्या हो सकता है? क्या ऐसे गुण हैं जो 'संक्रमणकालीन' नहीं हैं?

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

Comments

$ $ मान लेना jQuery के लिए एक उपनाम है, ऐसा करना [0] एक देशी डोम ऑब्जेक्ट (जैसा कि एक jquery ऑब्जेक्ट के विपरीत) वापस करेगा और कोई .on()विधि नहीं है । यदि नहीं - तो $ $ क्या है?

— xec

यदि आप jQuery का उपयोग कर रहे हैं तो कोई भी मान्य नहीं है, शैली () और देशी JS में कुछ भी नहीं है, यह निश्चित रूप से उस तरह काम नहीं करता है।

— adeneo

ऐसे नियमों का एक समूह है जो संक्रमण-सक्षम हैं। W3 विशिष्टता

— Goldentoa11

@ Goldentoa11 topसूची में प्रतीत होता है, जो topसंक्रमण के लिए उपलब्ध नहीं होने के बारे में मेरे संदेह को समाप्त करता है ।

— php_nub_qq 18

@php_nub_qq adaneo के उत्तर और उस पर मेरी टिप्पणी की जाँच करें, इसके लुक से आपको topमूल्य सेट (उदाहरण के लिए 0) से शुरू करने की आवश्यकता है इससे पहले कि आप इसे बदल दें (200 या जो भी हो)

— xec

Answer 1

सीएसएस में एक डिफ़ॉल्ट मान सेट करने का प्रयास करें (इसे यह बताने के लिए कि आप इसे कहां से शुरू करना चाहते हैं)

सीएसएस

position: relative;
transition: all 2s ease 0s;
top: 0; /* start out at position 0 */

Comments

या transition: top 1s ease 0s;के लिए topकेवल

— ओलेग Abrazhaev

Answer 2

शायद आपको अपने सीएसएस नियम सेट में एक शीर्ष मान निर्दिष्ट करने की आवश्यकता है, ताकि यह पता चले कि किस मूल्य से चेतन करना है ।

Answer 3

मेरे मामले में डिव पोजीशन तय हो गई थी, लेफ्ट पोजीशन को जोड़ना पर्याप्त नहीं था, केवल डिस्प्ले ब्लॉक को जोड़ने के बाद काम करना शुरू किया

left:0; display:block;

Answer 4

ऐसा कुछ जो ओपी के लिए प्रासंगिक नहीं है, लेकिन शायद भविष्य में किसी और के लिए:

पिक्सेल के लिए ( px), यदि मान "0" है, तो इकाई को छोड़ा जा सकता है: right: 0और right: 0pxदोनों काम करते हैं।

हालाँकि मैंने देखा कि फ़ायरफ़ॉक्स और क्रोम में यह सेकंड यूनिट ( ) के मामले में नहीं है s। जबकिtransition: right 1s ease 0s काम करता है, transition: right 1s ease 0( sपिछले मूल्य के लिए लापता इकाई transition-delay) ( हालांकि एज में काम नहीं करता है )।

निम्नलिखित उदाहरण में, आप देखेंगे कि rightदोनों के लिए काम करता है 0pxऔर 0, लेकिन यह transitionकेवल काम करता है 0sऔर इसके साथ काम नहीं करता है 0।

#box {
    border: 1px solid black;
    height: 240px;
    width: 260px;
    margin: 50px;
    position: relative;
}
.jump {
    position: absolute;
    width: 200px;
    height: 50px;
    color: white;
    padding: 5px;
}
#jump1 {
    background-color: maroon;
    top: 0px;
    right: 0px;
    transition: right 1s ease 0s;
}
#jump2 {
    background-color: green;
    top: 60px;
    right: 0;
    transition: right 1s ease 0s;
}
#jump3 {
    background-color: blue;
    top: 120px;
    right: 0px;
    transition: right 1s ease 0;
}
#jump4 {
    background-color: gray;
    top: 180px;
    right: 0;
    transition: right 1s ease 0;
}
#box:hover .jump {
    right: 50px;
}

<div id="box">
  <div class="jump" id="jump1">right: 0px<br>transition: right 1s ease 0s</div>
  <div class="jump" id="jump2">right: 0<br>transition: right 1s ease 0s</div>
  <div class="jump" id="jump3">right: 0px<br>transition: right 1s ease 0</div>
  <div class="jump" id="jump4">right: 0<br>transition: right 1s ease 0</div>
</div>

Answer 5

क्या ऐसे गुण हैं जो 'संक्रमणकालीन' नहीं हैं?

उत्तर: हाँ ।

यदि संपत्ति यहाँ सूचीबद्ध नहीं है, तो यह 'संक्रमणकालीन' नहीं है ।

संदर्भ: एनिमेटेड सीएसएस गुण

Answer 6

मैं आज इस मुद्दे पर भाग गया। यहाँ मेरा hacky समाधान है।

मुझे एक निश्चित स्थिति तत्व की आवश्यकता थी जिसे लोड करने पर 100 पिक्सेल तक संक्रमण हो।

var delay = (ms) => new Promise(res => setTimeout(res, ms));
async function animateView(startPosition,elm){
  for(var i=0; i<101; i++){
    elm.style.top = `${(startPosition-i)}px`;
    await delay(1);
  }
}