সিএসএস ট্রানজিশন শীর্ষ, নীচে, বাম, ডানদিকে কাজ করে না

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 ব্যবহার করেন তবে স্টাইল () নামে কিছু নেই এবং নেটিভ জেএসে, এটি অবশ্যই এর মতো কাজ করে না।

— অ্যাডিনিও

নিয়মের একটি সেট রয়েছে যা রূপান্তর-সক্ষম। দেখতে W3 স্পেসিফিকেশন

— Goldentoa11

@ গোল্ডেনোয়া ১১ লিস্টে topউপস্থিত রয়েছে, যা topট্রানজিশনের জন্য উপলব্ধ না হওয়ার বিষয়ে আমার সন্দেহ দূর করে ।

— php_nub_qq

@ পিএফপি_নুব_কিউআদানেওয়ের উত্তর এবং এটিতে আমার মন্তব্য দেখুন, এটির পরিবর্তে আপনার কোনও 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

— ওলেগ আব্রাজাইভ

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

আমি আজ এই ইস্যু মধ্যে দৌড়ে। এখানে আমার হ্যাকি সমাধান।

এটি লোড হওয়ার সাথে সাথে 100 পিক্সেল দ্বারা ট্রানজিশন করতে আমার একটি স্থিত অবস্থানের উপাদানটি প্রয়োজন needed

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);
  }
}