আপনি এটি প্রাকৃতিকভাবে প্রত্যাশা মতো প্রাকৃতিক পদ্ধতিতে কাজ করতে পারেন - প্রদর্শনটি ব্যবহার করে - তবে জাভাস্ক্রিপ্ট ব্যবহার করে বা অন্যরা যেমন অন্যের মধ্যে একটি ট্যাগ দিয়ে অভিনব কৌতুকের পরামর্শ দিয়েছেন তেমন আপনাকে ব্রাউজারটি কাজ করতে হবে thr আমি অভ্যন্তরীণ ট্যাগটির জন্য যত্ন নিই না কারণ এটি CSS এবং মাত্রা আরও জটিল করে তোলে, তাই এখানে জাভাস্ক্রিপ্ট সমাধান রয়েছে:
https://jsfiddle.net/b9chris/hweyecu4/17/
যেমন একটি বাক্স দিয়ে শুরু:
<div id="box" class="hidden">Lorem</div>
একটি লুকানো বাক্স।
div.hidden {
display: none;
}
#box {
transition: opacity 1s;
}
আমরা ব্রাউজারটিকে তাত্ক্ষণিকভাবে থ্রোট করার জন্য অফসেটহাইট যাচাই করে একটি সম্পর্কিত কিউ / এ-তে পাওয়া একটি কৌশল ব্যবহার করতে যাচ্ছি:
https://stackoverflow.com/a/16575811/176877
প্রথমত, উপরের কৌশলটিকে আনুষ্ঠানিকভাবে পাঠানো একটি গ্রন্থাগার:
$.fn.noTrnsn = function () {
return this.each(function (i, tag) {
tag.style.transition = 'none';
});
};
$.fn.resumeTrnsn = function () {
return this.each(function (i, tag) {
tag.offsetHeight;
tag.style.transition = null;
});
};
এর পরে, আমরা এটি একটি বাক্স প্রকাশ করতে ব্যবহার করব এবং এটিকে বিবর্ণ করব:
$('#button').on('click', function() {
var tag = $('#box');
if (tag.hasClass('hidden'))
tag.noTrnsn().removeClass('hidden')
.css({ opacity: 0 })
.resumeTrnsn().css({ opacity: 1 });
else
tag.css({ opacity: 0 });
});
এটি বাক্সটি বাইরে এবং বাইরে বিবর্ণ করে। সুতরাং, .noTrnsn()স্থানান্তরগুলি বন্ধ করে দেয়, তারপরে আমরা hiddenক্লাসটি সরিয়ে ফেলি, যা তার ডিফল্ট displayথেকে ফ্লিপ হয় ,। তারপরে বিবর্ণ হওয়ার জন্য প্রস্তুত হওয়ার জন্য আমরা অস্বচ্ছতা 0 তে সেট করে রেখেছি Now এখন আমরা স্টেজটি সেট করে রেখেই, আমরা ট্রানজিশনগুলি আবার চালু করি । এবং অবশেষে, অস্বচ্ছতাটিকে 1 এ সেট করে ট্রানজিশনটি বন্ধ করুন।noneblock.resumeTrnsn()
লাইব্রেরি ব্যতীত প্রদর্শনের পরিবর্তন এবং অস্বচ্ছতা উভয়ই আমাদের অনাকাঙ্ক্ষিত ফলাফল অর্জন করতে পারে। আমরা যদি সহজভাবে লাইব্রেরি কলগুলি সরিয়ে ফেলি তবে আমরা কোনও ট্রানজিশন পাই না।
মনে রাখবেন যে ফেডআউট অ্যানিমেশন শেষে উপরেরগুলি আবার কারও কাছে প্রদর্শন সেট করে না। যদিও আমরা ফ্যানসিয়ার পেতে পারি। আসুন এমন একটির সাথে এটি করা যাক যা 0 থেকে ম্লান হয়ে যায় এবং উচ্চতায় বৃদ্ধি পায়।
শৌখিন!
https://jsfiddle.net/b9chris/hweyecu4/22/
#box {
transition: height 1s, opacity 1s;
}
আমরা এখন উচ্চতা এবং অস্বচ্ছতা উভয়ই স্থানান্তর করছি। নোট করুন যে আমরা উচ্চতা নির্ধারণ করছি না, এর অর্থ এটি ডিফল্ট auto,। প্রচলিতভাবে এটি রূপান্তরিত হতে পারে না - অটো থেকে পিক্সেল মান (0 এর মতো) এ সরিয়ে নেওয়া আপনাকে কোনও রূপান্তর পাবে না। আমরা লাইব্রেরি এবং আরও একটি গ্রন্থাগার পদ্ধতি নিয়ে এটিকে ঘিরে কাজ করতে যাচ্ছি:
$.fn.wait = function (time, fn) {
if (time)
this.delay(time);
if (!fn)
return this;
var _this = this;
return this.queue(function (n) {
fn.call(_this);
n();
});
};
এটি একটি সুবিধা পদ্ধতি যা আমাদের jQuery এর বিদ্যমান fx / অ্যানিমেশন কাতারে অংশ নিতে দেয়, এখন অ্যানিমেশন ফ্রেমওয়ার্কের কোনও প্রয়োজন নেই যা এখন jQuery 3.x এ বাদ নেই। আমি jQuery এর কাজ করে ব্যাখ্যা যাচ্ছি না, কিন্তু বলার জন্য যথেষ্ট, .queue()এবং.stop() নদীর গভীরতানির্ণয় যে jQuery সাহায্যের আমাদের একে অপরের ওপর পদবিন্যাস থেকে আমাদের অ্যানিমেশন প্রতিরোধ প্রদান করে।
আসুন স্লাইড ডাউন এফেক্টটি অ্যানিমেট করুন।
$('#button').on('click', function() {
var tag = $('#box');
if (tag.hasClass('hidden')) {
// Open it
// Measure it
tag.stop().noTrnsn().removeClass('hidden').css({
opacity: 0, height: 'auto'
});
var h = tag.height();
tag.css({ height: 0 }).resumeTrnsn()
// Animate it
.css({ opacity: 1, height: h })
.wait(1000, function() {
tag.css({ height: 'auto' });
});
} else {
// Close it
// Measure it
var h = tag.noTrnsn().height();
tag.stop().css({ height: h })
.resumeTrnsn()
// Animate it
.css({ opacity: 0, height: 0 })
.wait(1000, function() {
tag.addClass('hidden');
});
}
});
এই কোডটি #boxক্লাসে পরীক্ষা করে এবং এটি বর্তমানে লুকানো আছে কিনা তা পরীক্ষা করে শুরু হয় । তবে এটি স্লাইডআউট / বিবর্ণ অ্যানিমেশনটির শেষে ক্লাস wait()যুক্ত করে লাইব্রেরি কলটি ব্যবহার করে আরও সাফল্য অর্জন করেছে hidden, যা আপনি বাস্তবে লুকানো আছে কিনা তা খুঁজে পেতে আশা করেছিলেন - উপরের সরল উদাহরণটি কিছু করতে পারেনি। এটি উপাদানটিকে বারবার প্রদর্শন / লুকিয়ে রাখতে সক্ষম করে, যা পূর্ববর্তী উদাহরণে একটি বাগ ছিল, কারণ লুকানো শ্রেণিটি পুনরুদ্ধার করা হয়নি।
ফোন .noTrnsn()করার #boxআগে ব্যবহারকারীকে না দেখিয়ে চূড়ান্ত উচ্চতা কী হবে তা পরিমাপ করার মতো পরিমাপ নেওয়া সহ সাধারণভাবে অ্যানিমেশনগুলির জন্য মঞ্চ নির্ধারণ করার পরে আপনি সিএসএস এবং শ্রেণীর পরিবর্তনগুলি ডেকে দেখতে পারেন calling.resumeTrnsn() এবং সেই সম্পূর্ণ সেট থেকে এটি অ্যানিমেট করা তার লক্ষ্য সিএসএসের মানগুলিতে মঞ্চ।
পুরানো উত্তর
https://jsfiddle.net/b9chris/hweyecu4/1/
এটির সাথে ক্লিক করে এটির संक्रमण হতে পারে:
function toggleTransition() {
var el = $("div.box1");
if (el.length) {
el[0].className = "box";
el.stop().css({maxWidth: 10000}).animate({maxWidth: 10001}, 2000, function() {
el[0].className = "box hidden";
});
} else {
el = $("div.box");
el[0].className = "box";
el.stop().css({maxWidth: 10001}).animate({maxWidth: 10000}, 50, function() {
el[0].className = "box box1";
});
}
return el;
}
someTag.click(toggleTransition);
সিএসএস হ'ল আপনার অনুমান:
.hidden {
display: none;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
color: yellow;
font-size: 18px;
left: 20px;
top: 20px;
position: absolute;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: scale(.2);
transform: scale(.2);
-webkit-transition: transform 2s;
transition: transform 2s;
}
.box1{
-webkit-transform: scale(1);
transform: scale(1);
}
কীটি ডিসপ্লে সম্পত্তিটি বিকাশ করছে। লুকানো শ্রেণিটি সরিয়ে এবং তারপরে ৫০ এমএস অপেক্ষা করে, তারপরে যুক্ত শ্রেণীর মাধ্যমে রূপান্তর শুরু করার পরে , আমরা এটি উপস্থিত হতে পেলাম এবং তারপরে আমরা চাইলে প্রসারিত করব, পরিবর্তে এটি কোনও অ্যানিমেশন ছাড়াই পর্দায় ঝাঁকুনি দেয়। লুকানো প্রয়োগ করার আগে অ্যানিমেশনটি শেষ না হওয়া পর্যন্ত আমরা অপেক্ষা করি না অন্যভাবে, একইভাবে ঘটে।
দ্রষ্টব্য: জাতিগত অবস্থা .animate(maxWidth)এড়াতে আমি এখানে গালি দিচ্ছি setTimeout। setTimeoutআপনি বা অন্য কেউ অজানা কোড তুললে গোপন বাগগুলি পরিচয় করিয়ে দেওয়া তাড়াতাড়ি হয়। .animate()সহজেই হত্যা করা যেতে পারে .stop()। আমি কেবল এটি স্ট্যান্ডার্ড এফএক্স কিউতে একটি 50 এমএস বা 2000 এমএস বিলম্ব স্থাপন করতে ব্যবহার করছি যেখানে এর উপরে অন্য কোডারগুলি বিল্ডিংয়ের দ্বারা সন্ধান / সমাধান করা সহজ।