196

জাভাস্ক্রিপ্ট ব্যবহার না করেই পৃষ্ঠা লোডে CSS3 রূপান্তর অ্যানিমেশন ব্যবহার করা সম্ভব?

এটি আমি যা চাই তা प्रकार, তবে পৃষ্ঠা লোডে:

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

এতক্ষণ যা পেলাম

CSS3 রূপান্তর-বিলম্ব , উপাদানগুলির উপর প্রভাব বিলম্ব করার একটি উপায়। শুধুমাত্র হোভারে কাজ করে।
CSS3 কীফ্রেম , লোডে কাজ করে তবে চূড়ান্তভাবে ধীর হয়। যে কারণে দরকারী নয়।
CSS3 রূপান্তর যথেষ্ট দ্রুত তবে পৃষ্ঠা লোডে প্রাণবন্ত করবেন না।

— জেনস টার্নেল
সূত্র

@blesh: প্রায় কিছুই - উদাহরণস্বরূপ, mysociversity.org/2011/08/11/mobile-operators- ব্রেকিং-

— 2006/

2

সিএসএস 3 অ্যানিমেশনগুলি সমর্থিত না হলে কীফ্রেমগুলি এটি সম্পাদন করবে এবং সেরা ফ্যালব্যাক সরবরাহ করবে। আপনি কেন তারা খুব ধীর বলে মনে করেন?

— zachleat

ওহে! লিঙ্কটি এখন ভেঙে গেছে এবং আমি জানি না এটি কোথায় গেল বোঝানো হয়েছিল যাতে কেউ দয়া করে এটি ঠিক করতে পারেন!

— লিনাক্স

460

আপনি কোনও জাভাস্ক্রিপ্ট ব্যবহার না করে পৃষ্ঠা লোডে একটি সিএসএস অ্যানিমেশন চালাতে পারেন ; আপনাকে কেবল CSS3 কীফ্রেম ব্যবহার করতে হবে ।

আসুন একটি উদাহরণ তাকান ...

এখানে কেবল CSS3 ব্যবহার করে কোনও নেভিগেশন মেনু স্লাইড হয়ে প্রদর্শিত হচ্ছে :

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}

<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>

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

এটি ভেংগে ফেল...

এখানে গুরুত্বপূর্ণ অংশগুলি হ'ল কীফ্রেম অ্যানিমেশন যা আমরা কল করি slideInFromLeft...

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

... যা মূলত "শুরুতে বলেছে, শিরোনামটি সম্পূর্ণ প্রস্থের দ্বারা স্ক্রিনের বাম হাতের প্রান্তের বাইরে চলে যাবে এবং শেষে স্থানে থাকবে"।

দ্বিতীয় অংশটি সেই slideInFromLeftঅ্যানিমেশনটিকে কল করছে :

animation: 1s ease-out 0s 1 slideInFromLeft;

উপরে শর্টহ্যান্ড সংস্করণ রয়েছে তবে স্বচ্ছতার জন্য এখানে ভার্জোজ সংস্করণ রয়েছে:

animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */

আপনি সমস্ত ধরণের আকর্ষণীয় কাজ করতে পারেন, যেমন বিষয়বস্তুতে স্লাইডিং বা অঞ্চলগুলির দিকে মনোযোগ আকর্ষণ।

ডাব্লু 3 সি বলতে যা আছে তা এখানে।

— ক্রিস স্পিটলস
সূত্র

20

পৃষ্ঠার লোডে এই রান কী করে, এবং এর আগে কোনওটি নয়?

— রল্ফ

2

কেবলমাত্র উপরের প্রশ্নের উত্তর দেওয়ার জন্য, এটি ডিফল্টরূপে প্রদর্শিত হয় অ্যানিমেশনটি প্রয়োগ হওয়ার পরে 0 সেকেন্ড শুরু হয়, কোনও বিলম্ব ছাড়াই। এটি অতিরিক্ত নিয়ন্ত্রণের জন্য অ্যানিমেশন-বিলম্ব রয়েছে control দেখুন: w3.org/TR/css3-animations/#animation-delay-property

— মাইকেল ডেভিস

2

ডকুমেন্টটি লোড হওয়ার পরে অ্যানিমেশনটি শুরু হবে তা নিশ্চিত করতে, শরীরের উপাদান বা নীচের অংশে শৈল ট্যাগের নীচে স্টাইলশিটে অ্যানিমেশন কোডটি রাখুন।

— টেলরম্যাক

@ সুজানএডেলম্যান ক্রোকোনিক্ট আমার জ্ঞান অনুসারে, আইই 9 স্থানান্তর সম্পত্তিটি সমর্থন করে না। আপনার বিকল্পগুলি হবে জেএস বা ক্রেফুল অবক্ষয়।

— ক্রিস স্পিটলস

1

দুর্দান্ত উত্তর, 2019 সালে আমাকে সাহায্য করেছে!

— গোসি

28

খুব কম জাভাস্ক্রিপ্ট প্রয়োজনীয়:

window.onload = function() {
    document.body.className += " loaded";
}

এখন সিএসএস:

.fadein {
    opacity: 0;
    -moz-transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
    transition: opacity 1.5s;
}

body.loaded .fadein {
    opacity: 1;
}

আমি জানি প্রশ্নটি "জাভাস্ক্রিপ্ট ব্যতীত" বলেছিল, তবে আমি মনে করি এটি জাভাস্ক্রিপ্টের একটি লাইন জড়িত একটি সহজ সমাধান রয়েছে তা উল্লেখ করা উপযুক্ত worth

এটি এমনকি ইনলাইন জাভাস্ক্রিপ্ট হতে পারে, এরকম কিছু:

<body onload="document.body.className += ' loaded';" class="fadein">

এটি প্রয়োজনীয় সমস্ত জাভাস্ক্রিপ্ট।

— রল্ফ
সূত্র

2

সামান্য স্থির করুন: <বডি অনলোড = "ডকুমেন্ট.ডি.এটিএট্রিবিউট ('শ্রেণি', 'বোঝা')">

— ইভান

1

পৃষ্ঠায় অপেক্ষা করার দরকার নেই যদি লোড ইভেন্টে </body> ট্যাগের আগে এই কোডটি সন্নিবেশ করান: <লিপি টাইপ = "পাঠ্য / জাভাস্ক্রিপ্ট"> document.body.setAttribute ('শ্রেণি', 'লোড'); </script>

— ইভান

7

বিদ্যমান bodyক্লাস ব্যবহারের ওভাররাইড এড়ানোর জন্য:document.body.classList.add('loaded)

— ভায়াচ্লাভ কোত্রুট

1

বিদ্যমান ক্লাসে ক্লাস যুক্ত করার document.body.className += " loaded";জন্য আমি কিছুটা কম ভার্বোজ পেয়েছি । loaded

— পিম শ্যাফাফ

1

@ পিমস্কাফ আপনার পরামর্শের জন্য ধন্যবাদ, এটি পুরোপুরি অর্থপূর্ণ হয়ে উঠেছে। আমি এখন এটি সম্পাদনা করব। আজকাল আপনি ক্লাসলিস্টও ব্যবহার করতে পারেন যা কিছুটা মার্জিত (তবে কম সামঞ্জস্যপূর্ণ)।

— রল্ফ

20

আমি মনে করি যে আমি ওপি প্রশ্নের জন্য একটি ধরণের কাজ পেয়েছি - পৃষ্ঠার 'অন.লোড' এর পরিবর্তনের পরিবর্তে - আমি দেখতে পেয়েছি যে একটি অস্বচ্ছ বিবর্ণের জন্য একটি অ্যানিমেশন ব্যবহার করার ক্ষেত্রে একই প্রভাব ছিল, (আমি খুঁজছিলাম ওপি হিসাবে একই জিনিস)।

তাই আমি পৃষ্ঠা লোডে সাদা (সাইটের ব্যাকগ্রাউন্ডের মতো) থেকে শরীরের পাঠ্য ম্লান করতে চেয়েছিলাম - এবং আমি কেবল সোমবার থেকে কোডিং করছি তাই আমি 'অন.লোড' শৈলীর আইটেম কোডটি খুঁজছিলাম, তবে এখনও জেএসকে চিনি না - সুতরাং এখানে আমার কোডটি আমার পক্ষে ভালভাবে কাজ করেছে।

#main p {
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

এবং যে কারণেই হোক না কেন, এটি .classকেবলমাত্র #id(কমপক্ষে আমার পক্ষে নয়) এর জন্য কাজ করে না

আশা করি এটি সহায়তা করে - আমি জানি যে এই সাইটটি আমাকে অনেক সাহায্য করে!

— লি জন
সূত্র

6

ঠিক আছে, এটি একটি কৌশলযুক্ত।

উত্তরটি "সত্যই নয়"।

সিএসএস কোনও কার্যকরী স্তর নয়। এটি কখন বা কখন ঘটে যায় সে সম্পর্কে কোনও সচেতনতা নেই। এটি বিভিন্ন "পতাকা" (শ্রেণি, আইডিস, রাজ্য) -এ একটি উপস্থাপনা স্তর যুক্ত করতে কেবল ব্যবহৃত হয় ।

ডিফল্টরূপে, সিএসএস / ডিওএম CSS ব্যবহারের জন্য কোনও ধরণের "অন লোড" রাষ্ট্র সরবরাহ করে না। আপনি যদি জাভাস্ক্রিপ্টটি ব্যবহার করতে / সক্ষম করতে চান, আপনি কোনও bodyসিএসএস সক্রিয় করতে কোনও শ্রেণি বা কিছু বরাদ্দ করতেন ।

বলা হচ্ছে, আপনি এটির জন্য একটি হ্যাক তৈরি করতে পারেন। আমি এখানে একটি উদাহরণ দেব, তবে এটি আপনার পরিস্থিতিতে প্রযোজ্য বা নাও হতে পারে।

"বন্ধ" "যথেষ্ট ভাল" এই ধারণাটি নিয়ে আমরা পরিচালনা করছি:

<html>
<head>
<!-- Reference your CSS here... -->
</head>
<body>
    <!-- A whole bunch of HTML here... -->
    <div class="onLoad">OMG, I've loaded !</div>
</body>
</html>

আমাদের সিএসএস স্টাইলশিটের একটি অংশ এখানে দেওয়া হয়েছে:

.onLoad
{
    -webkit-animation:bounceIn 2s;
}

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

— চতুর
সূত্র

1

@ রল্ফের সমাধানের মতো, তবে বাহ্যিক ফাংশনগুলি বা ক্লাসের সাথে খেলতে রেফারেন্সটি এড়িয়ে যান। যদি একবার লোড হয়ে গেলে অস্বচ্ছতাকে 1 এ স্থির করতে হয়, কেবল স্টাইলের মাধ্যমে অস্বচ্ছতা সরাসরি পরিবর্তন করতে ইনলাইন স্ক্রিপ্টটি ব্যবহার করুন। উদাহরণ স্বরূপ

<body class="fadein" onload="this.style.opacity=1">

যেখানে সিএসএস সিটেল "ফাডেইন" @ রোল্ফ প্রতি সংজ্ঞায়িত করা হয়েছে, সংক্রমণের সংজ্ঞা দেওয়া হয়েছে এবং প্রাথমিক অবস্থায় অস্বচ্ছতা সেট করুন (যেমন 0)

কেবল ধরাটিই হ'ল এটি স্প্যান বা ডিআইভি উপাদানগুলির সাথে কাজ করে না, যেহেতু তাদের ওভারলোড ইভেন্টটি কাজ করে না

— user3907296
সূত্র

1

এটির চেয়ে শরীরের উপরে হোভার দিয়ে এটি শুরু করুন এটি যখন শুরু হবে যখন মাউসটি প্রথম পর্দায় চলে আসে, যা বেশিরভাগ আগমনের পরে এক সেকেন্ডের মধ্যে থাকে, এখানে সমস্যাটি হ'ল পর্দার বাইরে গেলে এটি বিপরীত হবে।

html:hover #animateelementid, body:hover #animateelementid {rotate ....}

আমি ভাবতে পারি সেরা জিনিসটি: http://jsfiddle.net/faVLX/

পূর্ণস্ক্রিন: http://jsfiddle.net/faVLX/ebded/result/

নীচের মন্তব্যগুলি সম্পাদনা করুন:
এটি কোনও টাচস্ক্রিন ডিভাইসে কাজ করবে না কারণ কোনও হভার নেই, তাই ব্যবহারকারীরা সেটিকে ট্যাপ না করা পর্যন্ত সামগ্রীটি দেখতে পাবে না। - ধনী ব্র্যাডশো

— beardhatcode
সূত্র

হ্যাঁ, আমি নিজেই এটি বুঝতে পেরেছি। অন্য কিছু যদি না কাজ করে তবে এটি ঠিক আছে। এক জন্য ভোট।

— জেনস টার্নেল

13

এটি একটি ভয়ানক ধারণা - কোনও টাচস্ক্রিন ডিভাইসে কোনও হোভার নেই, তাই ব্যবহারকারীরা সেটিকে ট্যাপ না করলেই সামগ্রীটি দেখতে পাবেন না।

— ধনী ব্র্যাডশো

1

সিএসএস কেবল 3s দেরি করে

এখানে নিতে কয়েকটি পয়েন্ট:

এক কলে একাধিক অ্যানিমেশন
আমরা একটি অপেক্ষা অ্যানিমেশন তৈরি করি যা কেবল আসলটি (আমাদের ক্ষেত্রে দ্বিতীয়টি) বিলম্ব করে।

কোড:

header {
    animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}

@keyframes wait {
    from { transform: translateY(20px); }
    to { transform: translateY(20px); }
}

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

— Claudiu
সূত্র

0

ঠিক আছে যখন পৃষ্ঠাটি কেবলমাত্র CSS ট্রানজিশন (সাজানো!) ব্যবহার করে পৃষ্ঠাটি লোড করে আমি একটি অ্যানিমেশন অর্জন করতে সক্ষম হয়েছি:

আমি 2 টি CSS স্টাইল শীট তৈরি করেছি: প্রথমটি আমি কীভাবে এইচটিএমএলকে অ্যানিমেশনের আগে স্টাইল করা চাই ... এবং দ্বিতীয়টি পৃষ্ঠাটি কীভাবে অ্যানিমেশনটি পরিচালনা করা হয়েছে তা দেখতে চাই।

আমি কীভাবে এটি সম্পাদন করেছি তা আমি সম্পূর্ণরূপে বুঝতে পারি না তবে এটি কেবল তখন কার্যকর হয় যখন দুটি সিএসএস ফাইল (আমার নথির শিরোনামে উভয়) কিছু জাভাস্ক্রিপ্ট নিম্নলিখিত দ্বারা পৃথক করা হয় are

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

<link media="screen,projection" type="text/css" href="first-css-file.css"  rel="stylesheet" />

<script language="javascript" type="text/javascript" src="../js/jQuery JavaScript Library v1.3.2.js"></script>

<script type='text/javascript'>
$(document).ready(function(){

// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
$(".container .menu-text").click(function(){  // Update class to point at the head of the list
});
}
});
</script>

<link media="screen,projection" type="text/css" href="second-css-file.css"  rel="stylesheet" />

আমার কার্য-অগ্রগতি ওয়েবসাইটের একটি লিঙ্ক এখানে রয়েছে: http://www.hankins-design.co.uk/beta2/test/index.html

হতে পারে আমি ভুল কিন্তু আমি ভেবেছিলাম যে ব্রাউজারগুলি সিএসএস রূপান্তর সমর্থন করে না তাদের কোনও সমস্যা না হওয়া উচিত কারণ তাদের দেরি বা সময়কাল ছাড়াই সরাসরি দ্বিতীয় সিএসএস ফাইলে এড়ানো উচিত।

আমি কীভাবে অনুসন্ধান ইঞ্জিনটি বন্ধুত্বপূর্ণ এই সম্পর্কে মতামত জানতে আগ্রহী। আমার কালো টুপি দিয়ে আমি মনে করি আমি কীওয়ার্ড সহ একটি পৃষ্ঠা পূরণ করতে এবং এর অস্বচ্ছতার জন্য 9999 এর বিলম্ব প্রয়োগ করতে পারি।

অনুসন্ধানের ইঞ্জিনগুলি কীভাবে রূপান্তর-বিলম্ব বৈশিষ্ট্যটির সাথে ডিল করে এবং এটি উপরের পদ্ধতিটি ব্যবহার করে তারা পৃষ্ঠায় লিঙ্ক এবং তথ্য দেখতে পাবে কিনা তা জানতে আগ্রহী হব।

আরও গুরুত্বপূর্ণভাবে আমি জানতে চাই যে প্রতি বার পৃষ্ঠা লোড হওয়ার সাথে এটি কেন সামঞ্জস্যপূর্ণ নয় এবং আমি কীভাবে এটি সংশোধন করতে পারি!

আমি আশা করি এটি অন্য কিছু না হলে কিছু মতামত এবং মতামত তৈরি করতে পারে!

— মাইকেল ওয়াকলিং
সূত্র

0

অন্য কারও যদি একবারে দুটি ট্রানজিশন করতে সমস্যা হয় তবে আমি যা করেছি তা এখানে। পৃষ্ঠার লোডের উপরে থেকে নীচে আসার জন্য আমার পাঠ্য দরকার।

এইচটিএমএল

<body class="existing-class-name" onload="document.body.classList.add('loaded')">

এইচটিএমএল

<div class="image-wrapper">
    <img src="db-image.jpg" alt="db-image-name">
    <span class="text-over-image">DB text</span>
</div>

সিএসএস

.text-over-image {
    position: absolute;
    background-color: rgba(110, 186, 115, 0.8);
    color: #eee;
    left: 0;
    width: 100%;
    padding: 10px;
    opacity: 0;
    bottom: 100%;
    -webkit-transition: opacity 2s, bottom 2s;
    -moz-transition: opacity 2s, bottom 2s;
    -o-transition: opacity 2s, bottom 2s;
    transition: opacity 2s, bottom 2s;
}

body.loaded .text-over-image {
    bottom: 0;
    opacity: 1;
}

আমি কেন 1 জন নির্বাচক এবং 2 টি রূপান্তরিত ঘোষণাপত্র ব্যবহার করার চেষ্টা করেছিলাম এবং এগুলি উভয়ই ব্যবহার করবে বলে ভেবে থাকবেন না Don't

— s3c
সূত্র

0

এমনকি সহজ সমাধান (এখনও [এক লাইনের ইনলাইন] জাভাস্ক্রিপ্ট সহ):

এটি বডি ট্যাগ হিসাবে ব্যবহার করুন: নোট করুন body.বা this.আমার পক্ষে কাজ করেন নি। কেবল দীর্ঘ; (লিনাক্স ক্রোমিয়াম) querySelectorব্যবহারের অনুমতি দিনclassList.remove

<body class="onload" onload="document.querySelector('body').classList.remove('onload')">

এবং আপনার অন্যান্য সিএসএস বিধিগুলির উপরে এই লাইনটি যুক্ত করুন।

body.onload *{ transform: none !important; }

নোট করুন যে এটি কেবল অপসারণের পরিবর্তে ট্রানজিশন ট্রিগার হিসাবে অস্বচ্ছতা ব্যবহার করে (ওপি [অন্যান্য পোস্টারদের অনুরোধ হিসাবে) অস্বচ্ছতার ক্ষেত্রে প্রযোজ্য হতে পারে। (এমনকি একই ফ্যাশনে অন্য যে কোনও সিএসএস রুলিংয়েও কাজ করতে পারে এবং ট্রিগারের মধ্যে স্পষ্টতা বিলম্বের জন্য আপনি একাধিক শ্রেণী ব্যবহার করতে পারেন)

যুক্তিও একই রকম। কোনও রূপান্তর কার্যকর করুন ( :none !importantসমস্ত সন্তানের উপাদানগুলির সাথে body.onloadএবং একবার নথিটি লোড হয়ে গেলে আপনার সিএসএসে উল্লিখিত হিসাবে সমস্ত উপাদানগুলিতে সমস্ত রূপান্তর ট্রিগার করতে ক্লাস সরান।

প্রথম উত্তর নীচে (সংক্ষিপ্ত উত্তর জন্য উপরে সম্পাদনা দেখুন)

এখানে একটি বিপরীত সমাধান:

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

একাধিক উপাদান একাধিক স্থানান্তর সঙ্গে কাজ করে। ক্রস-ব্রাউজারের সামঞ্জস্যের চেষ্টা করেন নি।

#rotated{
    transform : rotate(90deg) /* any other transformation */;
    transition  3s;
}
#translated{
    transform : translate(90px) /* any other transformation */;
    transition  3s;
}
.waitload{
    transform: none !important;
}

<div id='rotated' class='waitload'>
    rotate after load
</div>
<div id='translated' class='waitload'>
    trasnlate after load
</div>
<script type="text/javascript">
     // or body onload ?
    [...document.querySelectorAll('.waitload')]
        .map(e => e.classList.remove('waitload'));

</script>

— লুই লাউডোগ ট্রোটিয়ার
সূত্র

-2

সত্যই নয়, যত তাড়াতাড়ি সম্ভব সিএসএস প্রয়োগ করা হবে, তবে উপাদানগুলি এখনও আঁকতে পারে না। আপনি 1 বা 2 সেকেন্ডের বিলম্ব অনুমান করতে পারেন তবে তাদের ইন্টারনেটের গতির উপর নির্ভর করে বেশিরভাগ লোকের পক্ষে এটি ঠিক দেখাবে না।

এছাড়াও, আপনি উদাহরণস্বরূপ কোনও কিছু বিবর্ণ করতে চান, তবে এটির জন্য সিএসএসের প্রয়োজন হবে যা বিতরণ করার জন্য সামগ্রীটি গোপন করে। যদি ব্যবহারকারীর CSS3 রূপান্তর না থাকে তবে তারা এটি কখনই দেখতে পাবেন না।

আমি jQuery (ব্যবহারের স্বাচ্ছন্দ্যের জন্য + আপনি অন্যান্য সংযুক্ত আরব আমিরাতের জন্য অ্যানিমেশন যোগ করতে ইচ্ছুক হতে পারেন) এবং কিছু জেএস ব্যবহার করার পরামর্শ দিচ্ছি:

$(document).ready(function() {
    $('#id_to_fade_in')
        .css({"opacity":0})   // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!)
        .delay(200)           // Wait for a bit so the user notices it fade in
        .css({"opacity":1});  // Fade it back in. Swap css for animate in legacy browsers if required.
});

সিএসএসে সংযোজন স্থানান্তরগুলির পাশাপাশি। প্রয়োজনে লিগ্যাসি ব্রাউজারগুলিতে দ্বিতীয় সিএসএসের পরিবর্তে সহজেই অ্যানিমেট ব্যবহারের অনুমতি দেওয়ার সুবিধা রয়েছে।

— ধনী ব্র্যাডশো
সূত্র

17

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

— ভয়েডকিং

আপনি একটি সিএসএস রূপান্তর অন্তর্ভুক্ত করবেন #id_to_fade in, যদিও আমি সম্মত, এটি উত্তর থেকে এতটা পরিষ্কার নয়।

— ধনী ব্র্যাডশো

যেমনটি রয়েছে, jQuery কলটিতে অন্য একটি .css ({ট্রানজিশন: 'ধূমপান 2s'}) যুক্ত করবেন? নাকি শুধু আপনার সিএসএসে? আমার এমন অনুভূতি আছে যে আমি এটি বোকা প্রশ্ন ...

— ভয়েডকিং

3

এটি ঠিক আছে - আমার সত্যিই একটি ডেমো রাখা উচিত ছিল। সিএসএসে, #id_to_fade_in { -webkit-transition:opacity 0.5s ease-in-out; }+ -o-, -moz-উপসর্গগুলিও।

— ধনী ব্র্যাডশো

2

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত নয়, কী-ফ্রেম ব্যবহার করা যাওয়ার উপায়।

— এডুয়ার্ডো নাভেদা

লোড উপর CSS3 রূপান্তর অ্যানিমেশন?

আসুন একটি উদাহরণ তাকান ...

এটি ভেংগে ফেল...