সিএসএস রূপান্তরটি দৃশ্যমানতার সাথে কাজ করছে না

Question 1

নীচের ভাঁজটিতে, আমি পৃথকভাবে দৃশ্যমানতা এবং অস্বচ্ছতার উপর একটি স্থানান্তর করেছি। পরেরটি কাজ করে তবে পূর্বের কাজ করে না। তদুপরি, দৃশ্যমানতার ক্ষেত্রে, স্থানান্তরের সময়টিকে হোভার আউটে বিলম্ব হিসাবে ব্যাখ্যা করা হয়। ক্রোম এবং ফায়ারফক্স উভয় ক্ষেত্রেই ঘটে। এটি কি বাগ?

http://jsfiddle.net/0r218mdo/3/

মামলা 1:

#inner{
    visibility:hidden;
    transition:visibility 1000ms;
}
#outer:hover #inner{
    visibility:visible;
}

কেস 2:

#inner1{
    opacity:0;
    transition:opacity 1000ms;
}
#outer1:hover #inner1{
    opacity:1;
}

Question 2

এটি কোনও ত্রুটি নয় - আপনি কেবলমাত্র অর্ডিনাল / গণনাযোগ্য বৈশিষ্ট্যগুলিতে রূপান্তর করতে পারেন (একটি সংখ্যাগত শুরু এবং শেষ সংখ্যা মান সহ এটি ভাবার একটি সহজ উপায় ... যদিও কিছু ব্যতিক্রম রয়েছে)।

এটি হ'ল কারণ রূপান্তর দুটি মানের মধ্যে কীফ্রেমগুলি গণনা করে এবং মধ্যবর্তী পরিমাণগুলিকে এক্সট্রাপোলেট করে একটি অ্যানিমেশন তৈরি করে।

visibility এক্ষেত্রে একটি বাইনারি সেটিং (দৃশ্যমান / লুকানো), সুতরাং একবার রূপান্তরের সময়সীমা অতিক্রান্ত হওয়ার পরে, সম্পত্তিটি সরলভাবে রাষ্ট্র পরিবর্তন করে, আপনি এটিকে বিলম্ব হিসাবে দেখেন- তবে এটি আসলে রূপান্তর অ্যানিমেশনের চূড়ান্ত কীফ্রেম হিসাবে দেখা যেতে পারে, মধ্যস্থতাকারী কীফ্রেমগুলি গণনা করা হয়নি (লুকানো / দৃশ্যমানের মধ্যে মানগুলি কী গঠন করে? অস্বচ্ছতা? মাত্রা? এটি সুস্পষ্ট না হিসাবে, সেগুলি গণনা করা হয় না)।

opacity একটি মান সেটিং (0-1), তাই কীফ্রেমগুলি প্রদত্ত সময়কালে গণনা করা যায়।

স্থানান্তরযোগ্য (অ্যানিমেটেবল) বৈশিষ্ট্যের একটি তালিকা এখানে পাওয়া যাবে

Question 3

দৃশ্যমানতা অ্যানিমেটেবল। এটি সম্পর্কে এই ব্লগ পোস্টটি দেখুন: http://www.greywyvern.com/?post=337

আপনি এটি এখানেও দেখতে পাবেন: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

ধরা যাক আপনার একটি মেনু রয়েছে যা আপনি মাউস হোভারে ফেড-ইন করতে এবং ফেইড-আউট করতে চান। আপনি যদি opacity:0কেবলমাত্র ব্যবহার করেন তবে আপনার স্বচ্ছ মেনুটি এখনও সেখানে থাকবে এবং অদৃশ্য অঞ্চলটিকে ঘুরে দেখলে এটি অ্যানিমেটেড হবে। তবে আপনি যদি যোগ করেন তবে আপনি visibility:hiddenএই সমস্যাটি দূর করতে পারেন:

div {
    width:100px;
    height:20px;
}
.menu {
    visibility:hidden;
    opacity:0;
    transition:visibility 0.3s linear,opacity 0.3s linear;
    
    background:#eee;
    width:100px;
    margin:0;
    padding:5px;
    list-style:none;
}
div:hover > .menu {
    visibility:visible;
    opacity:1;
}

<div>
  <a href="#">Open Menu</a>
  <ul class="menu">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>

স্নিপেট প্রসারিত করুন

Question 4

স্পেসিফিকেশন অনুসারে দৃশ্যমানতা একটি অ্যানিমেটেবল সম্পত্তি, তবে দৃশ্যমানতার উপর স্থানান্তরগুলি ধীরে ধীরে কাজ করে না, কারণ কেউ আশা করতে পারে। পরিবর্তে কোনও উপাদান লুকিয়ে থাকা দৃশ্যমানতার বিলম্বের উপর স্থানান্তর। অন্যদিকে একটি উপাদান দৃশ্যমান করা অবিলম্বে কাজ করে। এটি যেমন স্পেক দ্বারা সংজ্ঞায়িত হয় (ডিফল্ট সময় কার্যের ক্ষেত্রে) এবং এটি ব্রাউজারগুলিতে প্রয়োগ করা হয় তেমনি।

এটিও একটি দরকারী আচরণ, যেহেতু আসলে কোনও উপাদান লুকিয়ে রাখতে বিভিন্ন ভিজ্যুয়াল এফেক্টগুলি কল্পনা করতে পারে। কোনও উপাদান ফাইড হওয়া কেবল এক ধরণের ভিজ্যুয়াল এফেক্ট যা ধূমপান ব্যবহার করে নির্দিষ্ট করা হয়। অন্যান্য ভিজ্যুয়াল এফেক্টগুলি রূপান্তর সম্পত্তি হিসাবে যেমন উপাদানটি সরিয়ে ফেলতে পারে, এছাড়াও http://taccgl.org/blog/css-transition-visibility.html দেখুন

এটি দৃশ্যমানতার পরিবর্তনের সাথে অস্বচ্ছভাবে রূপান্তরটি একত্রিত করতে প্রায়শই কার্যকর! যদিও অস্বচ্ছতা সঠিক কাজটি করে বলে মনে হচ্ছে, সম্পূর্ণ স্বচ্ছ উপাদানগুলি (অস্বচ্ছতা: 0) এখনও মাউস ইভেন্টগুলি গ্রহণ করে। সুতরাং উদাহরণস্বরূপ এমন কোনও উপাদানের লিঙ্কগুলি যা কেবল অস্বচ্ছ রূপান্তর দ্বারা বিবর্ণ হয়ে গিয়েছিল, এখনও ক্লিকগুলিতে সাড়া দেয় (যদিও দৃশ্যমান নয়) এবং বিবর্ণ উপাদানটির পিছনে লিঙ্কগুলি কাজ করে না (যদিও বিবর্ণ উপাদানটির মাধ্যমে দৃশ্যমান হচ্ছে)। Http://taccgl.org/blog/css-transition-opacity-for-fade-effects.html দেখুন ।

এই অদ্ভুত আচরণটি কেবলমাত্র উভয় রূপান্তর, দৃশ্যমানতার উপর রূপান্তর এবং অস্বচ্ছতার উপর রূপান্তর ব্যবহার করে এড়ানো যায়। এর ফলে দৃশ্যমানতার বৈশিষ্ট্যটি উপাদানটির জন্য মাউস ইভেন্টগুলি অক্ষম করতে ব্যবহৃত হয় যখন দৃষ্টিভঙ্গি প্রভাবের জন্য অস্বচ্ছতা ব্যবহৃত হয়। তবে ভিজ্যুয়াল এফেক্টটি চলাকালীন উপাদানটি আড়াল না করার বিষয়ে যত্নবান হওয়া আবশ্যক, যা অন্যথায় দৃশ্যমান হবে না। এখানে দৃশ্যমানতার ক্রান্তিকরণের বিশেষ শব্দার্থকগুলি হাতের কাজ হয়ে যায়। কোনও উপাদানটি গোপন করার সময় উপাদানটি ভিজ্যুয়াল এফেক্ট প্লে করার সময় দৃশ্যমান থাকে এবং পরে লুকিয়ে থাকে। অন্যদিকে কোনও উপাদান প্রকাশ করার সময় দৃশ্যমান স্থানান্তর উপাদানটিকে তত্ক্ষণাত দৃশ্যমান করে তোলে, অর্থাৎ ভিজ্যুয়াল এফেক্টটি খেলার আগে।