ایجاد نوتیفیکیشن های زمان دار با CSS Animation

در این مقاله آموزشی کوتاه در لیداوب با نحوه ایجاد نوتیفیکیشن‌های زمان دار ساده با CSS Animation آشنا خواهید شد. هدف از این آموزش ایجاد نوتیفیکشن با نوار پیشرفت برای یک مدت زمان معین است.


برای ایجاد این نوع نوتیفیکیشن از یک شاخص پیشرفت (progress indicator) کوچک برای نمایش مدت زمان باقی مانده قبل از ناپدید شدن کادر استفاده می‌کنیم. احتمالا قبلا چنین نوتیفیکیشن‌هایی را دیده باشید. در کد html بخشی داریم که پیامی در خود دارد و بخشی دیگر هم نوار پیشرفت را در خود جای می‌دهد:

<div class="tn-box tn-box-color-1">
	<p>Your settings have been saved successfully!</p>
	<div class="tn-progress"></div>
</div>

باکس نوتیفیکیشن دارای کلاس های tn-box و tn-box-color-1 خواهد بود که برای تعریف رنگ‌های مختلف به کار می‌روند. سپس، استایل باکس را تعریف می‌کنیم:

.tn-box {
	width: 360px;
	position: relative;
	margin: 0 auto 20px auto;
	padding: 25px 15px;
	text-align: left;
	border-radius: 5px;
    box-shadow: 
		0 1px 1px rgba(0,0,0,0.1), 
		inset 0 1px 0 rgba(255,255,255,0.6);  
	opacity: 0;
	cursor: default;
	display: none;
}

.tn-box-color-1{
	background: #ffe691;
	border: 1px solid #f6db7b;
}

باکس باید به صورت display: none تنظیم شده و دارای درجه تاری صفر باشد. نوار پیشرفت هم دارای استایل زیر خواهد بود:

.tn-progress {
	width: 0;
	height: 4px;
	background: rgba(255,255,255,0.3);
	position: absolute;
	bottom: 5px;
	left: 2%;
	border-radius: 3px;
	box-shadow: 
		inset 0 1px 1px rgba(0,0,0,0.05), 
		0 -1px 0 rgba(255,255,255,0.6);
}

در ابتدا نوار پیشرفت دارای عرض صفر است. در این مثال از دکمه‌ای با یک چک باکس استفاده می‌کنیم که وقتی تیک خورد، انیمیشن شروع به حرکت کند:

input.fire-check:checked ~ section .tn-box {
	display: block;
	animation: fadeOut 5s linear forwards;
}

input.fire-check:checked ~ section .tn-box .tn-progress {
	animation: runProgress 4s linear forwards 0.5s;
}

این دکمه قبل از بخش حاوی باکس‌های نوتیفیکیشن قرار می‌گیرد. بنابراین، می‌توانیم از sibling combinatory عمومی استفاده کنیم. اگر می‌خواهید به جای آن از یک کلاس جاوا اسکریپت استفاده کنید، می‌توانید کد آن را به این صورت بنویسید:

.tn-box.tn-box-active {
	display: block;
	animation: fadeOut 5s linear forwards;
}

.tn-box.tn-box-active .tn-progress {
	animation: runProgress 4s linear forwards 0.5s;
}

که در آن، tn-box-active کلاسی است که شما به tn-box div  اضافه می‌کنید. انیمیشن به کار رفته برای کادر نوتیفیکیشن به این صورت است:

@keyframes fadeOut {
	0% 	{ opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; transform: translateY(0px);}
	99% { opacity: 0; transform: translateY(-30px);}
	100% { opacity: 0; }
}

انیمیشن نوار پیشرفت به این صورت خواهد بود:

@keyframes runProgress {
	0%	{ width: 0%; background: rgba(255,255,255,0.3); }
	100% { width: 96%; background: rgba(255,255,255,1); }
}

عرض باکس نوتیفیکیشن تا ۹۶ درصد متحرک خواهد بود یعنی ۲ درصد از چپ آغاز شده و می‌خواهیم که در ۲ درصد انتهایی باکس هم متوقف شود. مدت زمان انیمیشن نوار پیشرفت کمی کمتر از مدت زمان انیمیشن باکس محتوا خواهد بود چون دیرتر آغاز می‌شود. به نظر می‌رسد، بهتر است اگر کاربر نشانگر موس خود را روی باکس قرار داد، نوار پیشرفت در جای خود متوقف شود تا کاربر وقت کافی برای مطالعه پیام داشته باشد. اما به نظر می‌رسد، مرورگرهای وب کیت با این ترفند مشکل داشته باشند. در مرورگر کروم انیمیشن متوقف می‌شود و در سافاری، گزارش تخریب برنامه دریافت می‌شود اما در فایرفاکس به خود اجرا می‌شود. به هر حال شما می‌توانید این ترفند را به این صورت اجرا کنید:

.tn-box.tn-box-hoverpause:hover, 
.tn-box.tn-box-hoverpause:hover .tn-progress{
	animation-play-state: paused;
}

نیازی به گفتن نیست که این ترفند فقط در مرورگرهایی اجرا می‌شود که از CSS Animation پشتیبانی می‌کنند. برای بقیه مرورگرها به fallback جاوا اسکریپت نیاز خواهید داشت. 

مطالعه مقالات بیشتر در لیداوب:

امیدوارم این مقاله از سری مقالات تخصصی لیداوب نیز برای شما مفید بوده باشد. اگر مایل به یادگیری تخصصی CSS هستید، می‌توانید دوره آموزشی CSS را در لیداوب دنبال کنید. همچنین، می‌توانید سوالات و نظرات خود را در بخش کامنت‌ها با ما در میان بگذارید.

برچسب ها