অ্যানিমেশন CSS3: প্রদর্শন + অস্বচ্ছতা

Question

আমি CSS3 অ্যানিমেশন নিয়ে সমস্যা পেয়েছি।

.child {
    opacity: 0;
    display: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    display: block;
}

এই কোডটি কেবল তখনই কাজ করে যদি আমি এর পরিবর্তনটি সরিয়ে ফেলি display।

আমি হোভারের ঠিক পরে ডিসপ্লেটি পরিবর্তন করতে চাই তবে রূপান্তরটি ব্যবহার করে অস্বচ্ছতা পরিবর্তন করা উচিত।

Comments

সিএসএস যদি অন্যের পরামর্শ মতো কাজ না করে তবে ম্লান হওয়ার জন্য এখানে একটি খুব সাধারণ জাভাস্ক্রিপ্ট কোড রয়েছে।

— আবরণিল দাস

Answer 1

মাইকেলস উত্তরের ভিত্তিতে এটি হ'ল আসল সিএসএস কোড

.parent:hover .child
{
    display: block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

Comments

সব ব্রাউজার সমর্থন করতে ..?

— ডেভিড_এল্ডার

CSS3 সমস্ত ব্রাউজারে সমর্থিত নয়। আপনি যদি প্রসারিত করতে চান তবে সঠিক উপসর্গ যুক্ত করুন

— ক্রিস

ঘোরাফেরা করার সময় কীভাবে, fadeOutToNone কীভাবে প্রয়োগ করবেন?

— সবুজ

আপনি একটি শতাংশ ভগ্নাংশ ব্যবহার করতে পারেন হিসাবে, এটি 0.001% বরং যে 1% মত ব্যবহার ভাল কিছু অভ্যাস কারণ এটি "শুরু করা" বিলম্ব, যা আর অ্যানিমেশন মেয়াদের সঙ্গে আপাত হতে পারে ছোট

— জ্যাক Saucier

-O-keyframes নির্দেশনাটি আসলে অকেজো কারণ অ্যানিমেশনগুলিকে সমর্থন করার জন্য প্রথম অপেরা সংস্করণটি ইতিমধ্যে ওয়েবকিটের উপর ভিত্তি করে ছিল।

— রিকো ওসেপেক

Answer 2

যদি সম্ভব হয় - এর visibilityপরিবর্তে ব্যবহার করুনdisplay

এই ক্ষেত্রে:

.child {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.parent:hover .child {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s, visibility 0.3s;
}

Comments

দৃশ্যমান বৈশিষ্ট্যের সাথে সমস্যা হ'ল এটি উপাদানটিকে আড়াল করে না, এটি কেবল অদৃশ্য করে তোলে। সুতরাং এটি এখনও স্থান গ্রহণ করবে।

— স্যামুয়েল

কেবল অদৃশ্যই নয়, ইভেন্টগুলি (ক্লিকগুলি ইত্যাদি) এর জন্যও স্বচ্ছ। ডিসপ্লে পরিবর্তন না করা মানে ডকুমেন্টটি রিফ্লো করা নয়, যা একটি ভাল জিনিস। অস্বচ্ছতার মাধ্যমে মেশানো / আউট হওয়া উচিত এমন বেশিরভাগ উপাদানগুলির সম্ভবত কোনওভাবেই স্থির বা নিখুঁত অবস্থান থাকা উচিত।

— রাসমাস কাজ

Answer 3

আপনি সিএসএস অ্যানিমেশন সহ করতে পারেন:

0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;

Comments

ভাল ধারণা, আমি অ্যানিমেশন-ফিল-মোডের সাহায্যে হোভারের সময় আমার উপাদানটি প্রদর্শন করতে সক্ষম হয়েছি তবে আমি আই মাউসআউট, উপাদানটি অদৃশ্য হয়ে যায়।

— অ্যালেক্সিস ডেলিরিউ

আপনি ভরাট-মোড ব্যবহার করতে পারেন: অ্যানিমেশন শেষ হওয়ার পরে পরিবর্তনগুলি অবিরত রাখতে ফরওয়ার্ডগুলি।

— মাইকেল মুল্লানি

Answer 4

এই কর্মপরিকল্পনা কাজ করে:

1. একটি "কীফ্রেম" সংজ্ঞায়িত করুন:

   @-webkit-keyframes fadeIn { 
     0% { opacity: 0; }
     20% { opacity: 0; }
     40% { opacity: 0.3; }
     60% { opacity: 0.5; }
     80% { opacity: 0.9; }
     100% { opacity: 1; }
   }
   
   @keyframes fadeIn {
     0% { opacity: 0; }
     20% { opacity: 0; }
     40% { opacity: 0.3; }
     60% { opacity: 0.5; }
     80% { opacity: 0.9; }
     100% { opacity: 1; }
   }
   

2. "হোভার" এ এই "কীফ্রেম" ব্যবহার করুন:

   div a span { 
     display: none;
   }
   
   div a:hover span {
     display: block;
   
     -webkit-animation-name: fadeIn;
     -webkit-animation-duration: 1s;
     animation-name: fadeIn;
     animation-duration: 1s;
   }
   

Answer 5

এটি অর্জনের জন্য আমি এটি ব্যবহার করেছি। এগুলি হোভারে ম্লান হয়ে যায় তবে লুকানো থাকলে নিখুঁত জায়গা নেয় না, নিখুঁত!

.child {
    height: 0px;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in-out;
}

.parent:hover .child {
    height: auto;
    opacity: 1;
    visibility: visible;
}

Answer 6

আমি কিছুটা পরিবর্তন করেছি তবে ফলাফলটি সুন্দর।

.child {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.parent:hover child {
    width: 150px;
    height: 300px;
    opacity: .9;
}

সবাইকে ধন্যবাদ

Comments

এটি স্ক্রিন পাঠকদের সাথে দুর্দান্তভাবে খেলবে না: তারা সামগ্রীটি পড়তে থাকবে।

— এএইচডিভি

আপনি visibility: hidden;.child / visibility:visible;hover এ যোগ করতে পারেন এবং এটি স্ক্রিন রিডার সমস্যাটি সমাধান করা উচিত

— csilk

Answer 7

পয়েন্টার-ইভেন্টগুলি ব্যবহার করে এটি করার আরও একটি ভাল পদ্ধতি রয়েছে:

.child {
    opacity: 0;
    pointer-events: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    pointer-events: all;
}

দুর্ভাগ্যক্রমে, এটি IE10 এবং এর নীচে সমর্থিত নয়।

Answer 8

আমারও একই সমস্যা ছিল। @ মিচেলমুল্লানি এবং @ ক্রিসের পরামর্শ অনুসারে আমি ট্রানজিশনের পরিবর্তে অ্যানিমেশনগুলি ব্যবহার করার চেষ্টা করেছি - তবে "-মজ" এবং "-ও" উপসর্গের সাথে কপি-পেস্ট করা হলেও এটি কেবল ওয়েবকিট ব্রাউজারগুলির জন্যই কাজ করেছিল।

আমি visibilityপরিবর্তে ব্যবহার করে সমস্যাটি পেতে পেরেছি display। এটি আমার পক্ষে কাজ করে কারণ আমার সন্তানের উপাদানposition: absolute , সুতরাং নথির প্রবাহ ক্ষতিগ্রস্থ হচ্ছে না। এটি অন্যদের জন্যও কাজ করতে পারে।

মূল কোডটি আমার সমাধানটি ব্যবহার করে দেখতে এটির মতো হবে:

.child {
    position: absolute;
    opacity: 0;
    visibility: hidden;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    position: relative;
    opacity: 0.9;
    visibility: visible;
}

Comments

এটি অ্যানিমেট করার সময় যদি আপনি সন্তানের দিকে ফিরে ঘুরে দেখেন তবে উপাদানটি কেবল লুকিয়ে থাকা থেকে এটি পিছনে ফিরে আসবে। আপনি যদি আপনার মাউসটিকে স্থানের চারপাশে সরিয়ে নিচ্ছেন তবে বেশ বিরক্তিকর।

— আদমজ

Answer 9

আপনি যদি জেএসের সাহায্যে পরিবর্তনটি ট্রিগার করছেন, তবে ক্লিকের উপর ক্লিক করুন, একটি দুর্দান্ত কাজ আছে।

আপনি দেখতে পাচ্ছেন সমস্যাটি ঘটে কারণ অ্যানিমেশনটি প্রদর্শনে উপেক্ষা করা হয়: কোনও উপাদান ছাড়াই ব্রাউজার সমস্ত পরিবর্তন একবারে প্রয়োগ করে এবং উপাদানটি কখনই প্রদর্শিত হয় না : একই সময়ে অ্যানিমেটেড না থাকা অবস্থায় ব্লক করুন ।

কৌশলটি হ'ল ব্রাউজারটি দৃশ্যমানতা পরিবর্তন করার পরে তবে অ্যানিমেশনটি ট্রিগার করার আগে ফ্রেমটি রেন্ডার করতে বলে।

এখানে একটি জিকুয়ের উদাহরণ রয়েছে:

    $('.child').css({"display":"block"});
    //now ask the browser what is the value of the display property
    $('.child').css("display"); //this will trigger the browser to apply the change. this costs one frame render
    //now a change to opacity will trigger the animation
    $('.child').css("opacity":100);

Comments

এই প্রশ্নটি জাভাস্ক্রিপ্ট বা jQuery এর সাথে ট্যাগ করা হয়নি

— j08691

আমি জানি, আমি এটি কেন ঘটছে তার কারণ ব্যাখ্যা করার জন্য এটি লিখেছিলাম। আমি যখন এ সম্পর্কে জানতে পেরেছিলাম তখন এটি আমার পক্ষে খুব দরকারী ছিল এবং আমি আশা করি এটি অন্যকেও সহায়তা করবে।

— daniel.sedlaysk

বিটিডব্লিউ, অস্বচ্ছতা মানগুলি 0 থেকে 1 এর মধ্যে

— আমর

Answer 10

পরম বা স্থির উপাদানগুলিতে আপনি জেড-ইনডেক্সও ব্যবহার করতে পারেন:

.item {
    position: absolute;
    z-index: -100;
}

.item:hover {
    z-index: 100;
}

অন্যান্য উপাদানগুলির এখন -100 এবং 100 এর মধ্যে একটি জেড-সূচি থাকা উচিত।

Comments

দুর্ভাগ্যক্রমে যে type=passwordক্ষেত্রগুলিতে কেপাস পাসওয়ার্ড সূচক প্রতীকটিকে স্ক্রু করে দেয় । এটি দৃশ্যমান নয়।

— ফিল্ক

আমরা দয়া করে নির্বিচারে জেড-ইনডেক্স নম্বর ব্যবহার বন্ধ করতে পারি? এখানে: জেড-সূচক: 1; বনাম z- সূচক: -1 ঠিক জরিমানা করবে। বিশাল জেড-ইনডেক্স নম্বরগুলি বাছাই করা জিনিসগুলিকে নিয়ন্ত্রণহীন করে তোলে।

— dudewad

Answer 11

আমি জানি, এটি আসলেই আপনার প্রশ্নের সমাধান নয়, কারণ আপনি চেয়েছেন

প্রদর্শন + অস্বচ্ছতা

আমার দৃষ্টিভঙ্গি আরও সাধারণ প্রশ্ন সমাধান করে, তবে এটিই পটভূমির সমস্যা ছিল যা এর displayসাথে সমন্বয় করে সমাধান করা উচিত opacity।

আমার ইচ্ছা ছিল এলিমেন্টটি দৃশ্যমান না হয়ে উপায় থেকে সরিয়ে নেওয়া। এই সমাধান ঠিক যে আছে: এটা চলে আসে দূরে আউট উপাদান, এবং এই রূপান্তরটি জন্য ব্যবহার করা যেতে পারে:

.child {
  left: -2000px;
  opacity: 0;
  visibility: hidden;
  transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
}

.parent:hover .child {
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: left 0s, visibility 0s, opacity 0.8s;
}

এই কোডটিতে কোনও ব্রাউজারের উপসর্গ বা পশ্চাদপটে সামঞ্জস্য হ্যাক নেই। এটি কেবলমাত্র ধারণাটি চিত্রিত করে যে কীভাবে উপাদানটির আর প্রয়োজন হয় না তাই এটি কীভাবে সরানো হয়।

আকর্ষণীয় অংশ দুটি পৃথক রূপান্তর সংজ্ঞা। যখন মাউস-পয়েন্টারটি ঘোরাচ্ছে.parent উপাদানটি উপাদানটি .childতাত্ক্ষণিকভাবে স্থাপন করা দরকার এবং তারপরে অস্বচ্ছতা পরিবর্তন হবে:

transition: left 0s, visibility 0s, opacity 0.8s;

যখন কোনও হোভার নেই, বা মাউস-পয়েন্টারটি উপাদানটি থেকে সরিয়ে নেওয়া হয়েছে, উপাদানটি স্ক্রিন থেকে সরানোর আগে অস্বচ্ছতা পরিবর্তন শেষ হওয়া পর্যন্ত অপেক্ষা করতে হবে:

transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;

যেখানে সেট করা হবে সেই ক্ষেত্রে অবজেক্টটিকে সরিয়ে নেওয়া একটি কার্যকর বিকল্প হবে display:none বিন্যাসটি না ভেঙে এমন হবে।

আমি আশা করি আমি এই প্রশ্নের জন্য মাথায় পেরেকটি আঘাত করব যদিও আমি এর উত্তর না দিয়েছি।

Comments

মাইক্রোসফ্ট ফিল্টার IE9 থেকে অবহেলা করা হয়েছে। 2016 সালে উত্তরগুলিতে যুক্ত করার মতো কোনও বিশেষ কারণ আপনার মনে হচ্ছে?

— টাইলারহ

@ টাইলারএইচ কতজন ব্যবহারকারী পৌঁছাতে ইচ্ছুক তা স্বাদের প্রশ্ন।

— হ্যানস মরজেন্সটারন

এটিকে অবমূল্যায়ন করা বিবেচনা করে , এবং আইই <11 মাইক্রোসফ্ট দ্বারা আর সমর্থিত নয়, সেই সম্পত্তিটি ব্যবহার করার পরে সন্দেহজনক স্বাদ পাওয়া যায়।

— টাইলারহ

@ টাইলারহহ এমন ক্লায়েন্টদের সমন্বয় করা সাধারণ বিষয় যারা নতুন ব্রাউজারে আপগ্রেড করবেন না বা করতে পারবেন না। আমার কাছে ক্লায়েন্ট হিসাবে একটি সুপরিচিত ব্যাংক আছে যারা এখনও আই 6 ব্যবহার করে এবং "কারণে" আপগ্রেড করতে অস্বীকার করে।

— মার্কাস কানিংহাম

@MarcusCunningham প্রশ্নের সঙ্গে বাঁধা হয় CSS3 যা IE6 (এবং IE7 এবং IE8) ব্যবহার সম্পূর্ণরূপে precludes। খুব শীঘ্র সম্ভব ব্রাউজারে ওপি কোড লেখার জন্য হতে পারে, এই উত্তরের এমএস ফিল্টারটি অবচয় করা হয়েছিল। এবং ভবিষ্যতের পাঠকদের জন্য এটি আরও বেশি বেহুদা কারণ এটি এমনকি সমর্থিত নয়। এই প্রশ্নের উত্তরে এটি অন্তর্ভুক্ত করার পক্ষে কোনও যুক্তি নেই । এটি একটি মূল বিষয়, যেহেতু হ্যানস ইতিমধ্যে তার উত্তর থেকে এটি মুছে ফেলেছে।

— টাইলার এইচ

Answer 12

একটি জিনিস যা আমি করেছি তা প্রাথমিক রাষ্ট্রের মার্জিনটিকে "মার্জিন-বাম: -9999px" এর মতো কিছু হিসাবে সেট করা হয়েছিল যাতে এটি স্ক্রিনে উপস্থিত না হয় এবং তারপরে হোভারের অবস্থানে "মার্জিন-বাম: 0" পুনরায় সেট করুন। সেক্ষেত্রে এটি "প্রদর্শন: ব্লক" রাখুন। আমার জন্য কৌশলটি :)

সম্পাদনা করুন: রাষ্ট্রটি সংরক্ষণ করুন এবং পূর্ববর্তী হোভারের রাজ্যে ফিরে যাবেন না? ঠিক আছে এখানে আমাদের জেএস দরকার:

<style>
.hovered { 
    /* hover styles here */
}
</style>

<script type="text/javascript">
$('.link').hover(function() {
   var $link = $(this);
   if (!$link.hasclass('hovered')) { // check to see if the class was already given
        $(this).addClass('hovered');
   } 
});
</script>

Comments

ভাল ধারণা, কিন্তু তারপরে আমি মাউসআউট করি, উপাদানটি অদৃশ্য হয়ে যায় ...

— অ্যালেক্সিস ডেলরিয়ু

আলেকিস, তুমি যা করতে চাও তাই না? হোভারের অর্থ কেবল আপনার মাউস নিয়ে ঘোরাফেরা করার সময়। আপনি কী অর্জন করতে চাইছেন তা দয়া করে পরিষ্কার করুন।

— জোশুয়া

অস্ত্রোপচার. আমি মাউসআউটে বিবর্ণ সংরক্ষণ করতে চাই।

— অ্যালেক্সিস ডেলিরিউ

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

— জোশুয়া

Answer 13

হোভারআইন / আউট উভয় পথে অ্যানিমেশন রাখতে আমি এই সমাধানটি করেছি। আশা করি এটি কারও সাহায্য করবে

@keyframes fadeOutFromBlock {
  0% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }

  90% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }
}

@keyframes fadeInFromNone {
  0% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }

  1% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }
}

.drafts-content {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  animation: fadeInFromNone 1s ease-in;
  will-change: opacity, transform;

  &.hide-drafts {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
    animation: fadeOutFromBlock 0.5s ease-out;
    will-change: opacity, transform;
  }
}

Answer 14

সিএসএসের সাথে কীভাবে অপারেশন চালাবেন:
এটি আমার কোড:
সিএসএস কোড

.item {   
    height:200px;
    width:200px;
    background:red;
    opacity:0;
    transition: opacity 1s ease-in-out;
}

.item:hover {
    opacity: 1;
}
code {
    background: linear-gradient(to right,#fce4ed,#ffe8cc);
}

<div class="item">

</div>
<p><code> move mouse over top of this text</code></p>

অথবা এই ডেমো ফাইলটি পরীক্ষা করুন

ফাংশন ভোট ()
vote var ভোট = getElementById ("yourOpinion")
যদি (this.workWithYou):
ভোট + = 1};
হাঃ হাঃ হাঃ

Comments

displayসম্পত্তিটি সরানো হয়েছে বলে প্রশ্নটির উত্তর দেয় না ।

— টোস্ট

Answer 15

display:পরিবর্তনীয় নয়। আপনি যা করতে চান তা করতে আপনাকে সম্ভবত jQuery ব্যবহার করতে হবে।

Comments

আপনি যেকোন জায়গায় ডাব্লু jQuery এর পরামর্শ বন্ধ করতে হবে।

— বেনিয়ামিন গ্রুইনবাউম

পুনঃটুইট করেছেন এটি দুর্দান্ত এবং সব কিছু করে।

— মাদারার ঘোস্ট