گاهی وقت‌ها ممکن است با مسائلی در CSS مثل کار نکردن transition در هنگام تغییر حالت توسط رویدادهای جاوااسکریپتی مانند mouseenter مواجه شوید. این مشکلات می‌توانند در برخی از شرایط به وجود بیایند که در این مقاله به آن‌ها خواهیم پرداخت.
اول از همه، مهم است بدانیم که ویژگی transition در CSS به تغییرات تدريجي برای ویژگی‌هایی مثل width، height، opacity و غیره مرتبط است. به این ترتیب، زمانی که یک المان با استفاده از ویژگی‌های CSS در وضعیت دیگر قرار می‌گیرد، transition به آرامی این تغییرات را اعمال می‌کند.
اگر شما در حال استفاده از ویژگی جاوااسکریپت mouseenter برای تغییر حالت یک المان هستید، باید توجه داشته باشید که CSS خود را درست تنظیم کرده‌اید و ویژگی‌های پشتیبانی‌کننده از transition را تنظیم کرده‌اید.
گاهی اوقات، این مشکل ممکن است به دلیل ترتیب نا‌مناسب تعریف transition یا ساختار HTML و CSS نادرست رخ دهد. برای کاهش احتمال مشکلات، مطمئن شوید که HTML شما به درستی ساختار یافته و قوانین CSS به درستی اعمال شده است.
بیایید به یک نمونه کد نگاهی بیندازیم:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Transition Example</title>
<style>
.myDiv {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 0.5s ease, transform 0.5s ease;
}
.hovered {
background-color: green;
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="myDiv" id="demoDiv"></div>
<script>
const demoDiv = document.getElementById('demoDiv');
demoDiv.addEventListener('mouseenter', function() {
demoDiv.classList.add('hovered');
});
demoDiv.addEventListener('mouseleave', function() {
demoDiv.classList.remove('hovered');
});
</script>
</body>
</html>
در کد بالا:
<div class="myDiv"> نشان‌دهنده المانی است که ما می‌خواهیم با استفاده از CSS و جاوااسکریپت حالتش را تغییر دهیم. transition: background-color 0.5s ease, transform 0.5s ease; برای .myDiv تعریف شده تا تغییرات رنگ پس‌زمینه و مقیاس به طور نرم انجام شود. یک کلاس به نام
.hovered داریم که تغییرات مدنظر (رنگ سبز و مقیاس بزرگ‌تر) را اعمال می‌کند. demoDiv.addEventListener('mouseenter', ...) برای افزودن کلاس hovered به المان div زمانی که ماوس وارد می‌شود، استفاده شده. demoDiv.addEventListener('mouseleave', ...) برای حذف کلاس hovered زمانی که ماوس خارج می‌شود، به کار رفته است.