من خوشحالم که بر این واقعیت که CSS روشن می کنم grid-template-rows و grid-template-columns خواص هستند اکنون در تمام مرورگرهای وب اصلی قابل حرکت است! خب، CSS Grid مدت‌هاست که از انیمیشن‌ها پشتیبانی فنی می‌کند، همانطور که هست درست در مشخصات ماژول طرح بندی شبکه CSS سطح 1 پخته شده است.

اما متحرک سازی این ویژگی های شبکه اخیراً توسط هر سه مرورگر اصلی پشتیبانی شده است. آیا می‌خواهیم به چند نمونه نگاهی بیندازیم تا آب خلاقیت را به جریان بیندازیم؟

مثال 1: گسترش نوار کناری

اول از همه، این چیزی است که ما در مورد آن صحبت می کنیم:

یک شبکه دو ستونی ساده. حالا، قبلا، ممکن است نه این را با استفاده از CSS Grid ساخته‌اید، زیرا انیمیشن‌ها و انتقال‌ها پشتیبانی نمی‌شوند، اما اگر می‌خواهید ستون سمت چپ - شاید یک مسیریابی نوار کناری - در حالت شناور گسترش یابد، چه؟ خب، حالا این امکان پذیر است.

میدونم به چی فکر میکنی: متحرک سازی یک ویژگی CSS؟ آسان peasy، من سالها این کار را انجام می دهم!» من هم همینطور. با این حال، در حین آزمایش با یک مورد خاص، به مشکل جالبی برخوردم.

بنابراین، ما می خواهیم خود شبکه را انتقال دهیم (به طور خاص grid-template-columns، که بر روی تنظیم شده است .grid کلاس در مثال). اما ستون سمت چپ (.left) انتخاب کننده ای است که به آن نیاز دارد :hover شبه طبقه در حالی که جاوا اسکریپت می تواند این معما را به راحتی حل کند - با تشکر، اما نه - ما می توانیم آن را تنها با CSS انجام دهیم.

بیایید از طریق HTML شروع کنیم. چیزهای بسیار استاندارد واقعاً ... یک شبکه با دو ستون.

<div class="grid"> <div class="left"></div> <div class="right"></div>
</div>

با کنار گذاشتن CSS لوازم آرایشی، ابتدا باید آن را تنظیم کنید display: grid روی ظرف اصلی (.grid).

.grid { display: grid;
}

در مرحله بعد، می‌توانیم دو ستون را با استفاده از عبارت تعریف و اندازه کنیم grid-template-columns ویژگی. ستون سمت چپ را فوق‌العاده باریک می‌کنیم و بعداً با شناور عرض آن را افزایش می‌دهیم. ستون سمت راست بقیه فضای باقیمانده را به لطف auto کلمه کلیدی.

.grid { display: grid; grid-template-columns: 48px auto;
}

ما می دانیم که قرار است این چیز را متحرک سازیم، پس بیایید جلو برویم و a را پرتاب کنیم transition در آنجا در حالی که ما در آن هستیم، بنابراین تغییر بین حالت ها صاف و قابل توجه است.

.grid { display: grid; grid-template-columns: 48px auto; transition: 300ms; /* Change as needed */
}

همین برای .grid! تنها چیزی که باقی می ماند اعمال حالت شناور است. به طور خاص، ما قصد داریم تا را نادیده بگیریم grid-template-columns ویژگی به طوری که ستون سمت چپ فضای بیشتری را در زمان شناور اشغال کند.

این به تنهایی آنقدرها جالب نیست، اگرچه بسیار عالی است که انیمیشن ها و انتقال ها اکنون در CSS Grid پشتیبانی می شوند. جالبتر این است که ما می توانیم نسبتا جدید استفاده کنیم :has() شبه طبقه برای استایل دادن به ظرف والد (.grid) در حالی که کودک (.left) معلق می شود.

.grid:has(.left:hover) { /* Hover styles */
}

به انگلیسی ساده این می گوید: "یه کاری به .grid اگر حاوی عنصری به نام باشد .left داخل آن که در حالت شناور قرار دارد.» از همین رو :has() اغلب به عنوان انتخابگر "والد" شناخته می شود. ما در نهایت می‌توانیم یک والدین را بر اساس فرزندانی که در آن موجود است انتخاب کنیم - نیازی به جاوا اسکریپت نیست!

بنابراین، اجازه دهید عرض را افزایش دهیم .left ستون به 30% زمانی که معلق می شود. را .right ستون همچنان تمام فضای باقیمانده را اشغال می کند:

.grid { display: grid; transition: 300ms; grid-template-columns: 48px auto;
} .grid:has(.left:hover) { grid-template-columns: 30% auto;
}

ما می‌توانیم از متغیرهای CSS نیز استفاده کنیم، که ممکن است بسته به ترجیحات شخصی شما تمیزتر به نظر برسند یا نباشند (یا به هر حال ممکن است از متغیرهای CSS در پروژه خود استفاده کنید):

.grid { display: grid; transition: 300ms; grid-template-columns: var(--left, 48px) auto;
} .grid:has(.left:hover) { --left: 30%;
}

I عشق که شبکه‌های CSS را می‌توان متحرک کرد، اما این واقعیت که ما می‌توانیم این نمونه خاص را تنها با نه خط CSS بسازیم، شگفت‌انگیزتر است.

در اینجا یک مثال دیگر توسط اولیویا نگ - مفهوم مشابه، اما با محتوا (روی نماد ناوبری کلیک کنید):

مثال 2: گسترش پانل ها

این مثال ظرف شبکه (عرض ستون) و همچنین ستون های جداگانه (رنگ پس زمینه آنها) را تغییر می دهد. برای ارائه محتوای بیشتر در شناور ایده آل است.

شایان ذکر است که repeat() تابع گاهی اوقات انتقال های باگی ایجاد می کند، به همین دلیل است که عرض هر ستون را جداگانه تنظیم می کنم (یعنی grid-template-columns: 1fr 1fr 1fr).

مثال 3: اضافه کردن سطر و ستون

این مثال به صورت متحرک یک ستون را به شبکه اضافه می کند. با این حال - حدس زدید - این سناریو یک دام نیز دارد. لازمه این است که ستون "جدید" نباید پنهان شود (یعنی تنظیم شود display: none، و CSS Grid باید وجود آن را در حالی که عرض آن را تنظیم می کند تأیید کند 0fr.

بنابراین، برای یک شبکه سه ستونی - grid-template-columns: 1fr 1fr 0fr (بله، واحد باید اعلام شود حتی اگر مقدار آن باشد 0!) انتقال به grid-template-columns: 1fr 1fr 1fr درست است، اما grid-template-columns: 1fr 1fr نمی کند. در گذشته، با توجه به آنچه ما در مورد آن می دانیم، این در واقع کاملاً منطقی است انتقال ها چگونه کار می کنند.

در اینجا یک مثال دیگر توسط میشل بارکر - همان مفهوم، اما با یک ستون اضافی و خیلی پیتزا بیشتر مطمئن شوید که این یکی را در حالت تمام صفحه اجرا کنید زیرا در واقع پاسخگو است (بدون حقه، فقط طراحی خوب!).

چند نمونه دیگر

چون چرا نه؟

این "Mondrian متحرک" اثبات اصلی مفهوم شبکه های CSS متحرک توسط است Chrome DevRel. grid-row'شن grid-columnاز span کلمه کلیدی برای ایجاد طرح بندی که قبل از خود می بینید و سپس grid-template-row'شن grid-template-columnبا استفاده از یک انیمیشن CSS متحرک می شوند. آنقدر که به نظر می رسد پیچیده نیست!

همان مفهوم، اما با بیشتر آن پیتزا میشل بارکر. آیا می توانید یک اسپینر بارگیری خوب بسازید؟

با کمی نوستالژی به پایان رسید (در اینجا سن من را نشان می دهم)، شبکه CSS متحرک نه چندان مشبک توسط اندرو هاروارد. دوباره - همان مفهوم - فقط این است که شما نمی توانید سایر موارد شبکه را ببینید. اما نگران نباشید، آنها آنجا هستند.

• محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
• منبع: https://css-tricks.com/animating-css-grid-how-to-examples/