[{"data":1,"prerenderedAt":253},["ShallowReactive",2],{"lesson:t5-s07-transitions":3,"course:taropood":57},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,7,"t5-s07-transitions","book",5,"فصل ۰۷ — transition",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},6,"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},8,"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",[20,24,27,32,35,38,41,44,47,50,54],{"kind":21,"heading":22,"html":23},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>آخر این فصل یک دکمه داری که وقتی موس رویش می‌رود، \u003Cstrong>نرم و آرام\u003C\u002Fstrong> رنگش تیره‌تر می‌شود و کمی بزرگ می‌شود — نه با یک جهشِ ناگهانی، بلکه در طولِ چند دهمِ ثانیه. همان \u003Ccode>transform\u003C\u002Fcode> و رنگی که بلدی سرِ جایشان‌اند؛ کاری که این فصل اضافه می‌کند این است که تغییرِ بینِ دو حالت را روان کند. ابزارش یک property تازه است: \u003Ccode>transition\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-instant-vs-smooth.4c80f47001.160.webp 160w, \u002F_img\u002F01-image-instant-vs-smooth.4c80f47001.320.webp 320w, \u002F_img\u002F01-image-instant-vs-smooth.4c80f47001.640.webp 640w, \u002F_img\u002F01-image-instant-vs-smooth.4c80f47001.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-instant-vs-smooth.4c80f47001.1280.jpg\" srcset=\"\u002F_img\u002F01-image-instant-vs-smooth.4c80f47001.160.jpg 160w, \u002F_img\u002F01-image-instant-vs-smooth.4c80f47001.320.jpg 320w, \u002F_img\u002F01-image-instant-vs-smooth.4c80f47001.640.jpg 640w, \u002F_img\u002F01-image-instant-vs-smooth.4c80f47001.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک دکمه در دو ردیف: ردیفِ بالا تغییرِ ناگهانی از رنگِ روشن به تیره در یک پرش، و ردیفِ پایین همان تغییر ولی نرم و پله‌پله در چند گام میانی\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>با \u003Ccode>transition\u003C\u002Fcode> تغییرِ بینِ دو حالت را نرم کنی\u003C\u002Fli>\n\u003Cli>چهار جزءِ یک \u003Ccode>transition\u003C\u002Fcode> را نام ببری: property، duration، timing-function و delay\u003C\u002Fli>\n\u003Cli>هم رنگ و هم \u003Ccode>transform\u003C\u002Fcode> را با هم transition بدهی\u003C\u002Fli>\n\u003Cli>بگویی چرا \u003Ccode>transition\u003C\u002Fcode> باید روی قاعدهٔ پایه باشد، نه روی \u003Ccode>:hover\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":21,"heading":25,"html":26},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از فصل ۶ (همین ترم):\u003C\u002Fstrong> \u003Ccode>transform\u003C\u002Fcode> و \u003Ccode>scale()\u003C\u002Fcode> — همان حرکت را این‌بار نرم می‌کنیم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۱ (همین ترم):\u003C\u002Fstrong> \u003Ccode>:hover\u003C\u002Fcode> — تغییرِ حالت را با موس راه می‌اندازیم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۲:\u003C\u002Fstrong> \u003Ccode>background-color\u003C\u002Fcode> و \u003Ccode>color\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— یک دکمه می‌بینی که با موس رنگش ناگهان می‌پرد. کارِ این فصل این است که همین جهش را نرم کنی و فرقش را با چشمت ببینی","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-5-interaction\u002Fsession-07-transitions",{"kind":21,"heading":33,"html":34},"۱. مشکل: تغییرِ ناگهانی","\u003Ch2 id=\"۱-مشکل-تغییرِ-ناگهانی\">۱. مشکل: تغییرِ ناگهانی\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D9%85%D8%B4%DA%A9%D9%84-%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1%D9%90-%D9%86%D8%A7%DA%AF%D9%87%D8%A7%D9%86%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اول دکمه را بساز. HTML یک \u003Ccode><button>\u003C\u002Fcode> ساده است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><button type="button" class="btn">دنبال کردن<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و استایلِ پایه، به‌همراه یک حالتِ \u003Ccode>:hover\u003C\u002Fcode> که رنگ را تیره‌تر و دکمه را کمی بزرگ می‌کند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.btn {\n  padding: 12px 28px;\n  font-size: 1rem;\n  color: #ffffff;\n  background-color: #2a6b93;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n.btn:hover {\n  background-color: #1d4d6b;\n  transform: scale(1.05);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>موس را روی دکمه ببر. رنگ تیره می‌شود و دکمه بزرگ‌تر — ولی \u003Cstrong>ناگهانی\u003C\u002Fstrong>، در یک چشم‌به‌هم‌زدن. این همان رفتارِ پیش‌فرضِ CSS است: هر تغییرِ حالت آنی اتفاق می‌افتد. برای حرکت‌های ظریف، این جهش خشن به‌نظر می‌رسد.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. اولین transition: نرم کردنِ رنگ","\u003Ch2 id=\"۲-اولین-transition-نرم-کردنِ-رنگ\">۲. اولین \u003Ccode>transition\u003C\u002Fcode>: نرم کردنِ رنگ\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%D8%A7%D9%88%D9%84%DB%8C%D9%86-transition-%D9%86%D8%B1%D9%85-%DA%A9%D8%B1%D8%AF%D9%86%D9%90-%D8%B1%D9%86%DA%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>transition\u003C\u002Fcode> به مرورگر می‌گوید «به‌جای اینکه این property را یک‌دفعه عوض کنی، در طولِ یک مدت آرام تغییرش بده». مهم‌ترین نکته این است که \u003Ccode>transition\u003C\u002Fcode> را روی قاعدهٔ \u003Cstrong>پایه\u003C\u002Fstrong> می‌گذاری (اینجا \u003Ccode>.btn\u003C\u002Fcode>)، نه روی \u003Ccode>:hover\u003C\u002Fcode>. یک \u003Ccode>transition\u003C\u002Fcode> برای \u003Ccode>background-color\u003C\u002Fcode> اضافه کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.btn {\n  padding: 12px 28px;\n  font-size: 1rem;\n  color: #ffffff;\n  background-color: #2a6b93;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا موس را روی دکمه ببر و بردار. رنگ دیگر نمی‌پرد؛ در طولِ حدودِ یک‌سومِ ثانیه نرم تیره می‌شود، و وقتی موس را برداری همان‌قدر نرم روشن برمی‌گردد — \u003Cstrong>در هر دو جهت\u003C\u002Fstrong>. این نرمیِ دوطرفه کلیدِ کار است.\u003C\u002Fp>\n\u003Cp>\u003Ccode>0.3s\u003C\u002Fcode> مدتِ تغییر است (\u003Ccode>s\u003C\u002Fcode> یعنی ثانیه). امتحانش کن: \u003Ccode>0.3s\u003C\u002Fcode> را به \u003Ccode>2s\u003C\u002Fcode> عوض کن تا تغییر خیلی کند و کش‌دار شود، بعد \u003Ccode>0.05s\u003C\u002Fcode> تا تقریباً آنی شود. با چشمت رابطهٔ عدد و سرعت را ببین.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>قبل از ادامه، جواب بده:\u003C\u002Fstrong> اگر \u003Ccode>transition\u003C\u002Fcode> را کلاً برداری، دکمه با موس چه شکلی عوض می‌شود؟\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> ناگهانی، مثلِ بخش ۱. بدونِ \u003Ccode>transition\u003C\u002Fcode> هر تغییرِ حالت آنی است؛ \u003Ccode>transition\u003C\u002Fcode> تنها چیزی است که آن جهش را به یک حرکتِ نرم تبدیل می‌کند.\u003C\u002Fp>\n",{"kind":21,"heading":39,"html":40},"۳. چهار جزءِ یک transition","\u003Ch2 id=\"۳-چهار-جزءِ-یک-transition\">۳. چهار جزءِ یک \u003Ccode>transition\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%DA%86%D9%87%D8%A7%D8%B1-%D8%AC%D8%B2%D8%A1%D9%90-%DB%8C%DA%A9-transition\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>آن خطِ \u003Ccode>transition: background-color 0.3s ease\u003C\u002Fcode> در واقع چند تنظیم را کنارِ هم دارد. یک \u003Ccode>transition\u003C\u002Fcode> تا چهار جزء می‌گیرد:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>property\u003C\u002Fstrong> — کدام property نرم شود (\u003Ccode>background-color\u003C\u002Fcode>). می‌توانی \u003Ccode>all\u003C\u002Fcode> بنویسی تا همه‌چیز، ولی نام‌بردنِ دقیق بهتر است.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>duration\u003C\u002Fstrong> — چقدر طول بکشد (\u003Ccode>0.3s\u003C\u002Fcode>).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>timing-function\u003C\u002Fstrong> — ریتمِ حرکت (\u003Ccode>ease\u003C\u002Fcode>): تند شروع شود یا یکنواخت.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>delay\u003C\u002Fstrong> — چقدر صبر کند تا شروع شود؛ اختیاری است و اگر ننویسی صفر است.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>جزءِ سومی که تازه است \u003Ccode>timing-function\u003C\u002Fcode> است. \u003Ccode>ease\u003C\u002Fcode> (پیش‌فرض) کمی نرم شروع و نرم تمام می‌شود؛ \u003Ccode>linear\u003C\u002Fcode> با سرعتِ یکنواخت پیش می‌رود. امتحان کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.btn {\n  transition: background-color 0.6s linear;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> مدت را ۰٫۶ ثانیه گذاشتیم تا فرق بهتر دیده شود. با \u003Ccode>linear\u003C\u002Fcode> تغییر با آهنگِ یکنواخت پیش می‌رود؛ حالا \u003Ccode>linear\u003C\u002Fcode> را به \u003Ccode>ease-in-out\u003C\u002Fcode> عوض کن و ببین آرام شروع می‌شود، وسط تند می‌شود و آرام تمام. برای دیدنِ این فرق، مدت را کوتاه نگذار.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>قبل از ادامه، جواب بده:\u003C\u002Fstrong> اگر به‌جای نام‌بردنِ \u003Ccode>background-color\u003C\u002Fcode>، اسمِ property را \u003Ccode>all\u003C\u002Fcode> بگذاری، چه فرقی می‌کند؟\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> \u003Ccode>all\u003C\u002Fcode> یعنی هر property ای که بینِ دو حالت عوض می‌شود نرم شود، نه فقط رنگ. راحت به‌نظر می‌رسد، ولی گاهی چیزی را که نمی‌خواستی هم آرام می‌کند و حرکت را کند نشان می‌دهد. نام‌بردنِ دقیقِ همان property هایی که واقعاً می‌خواهی، امن‌تر و روشن‌تر است.\u003C\u002Fp>\n",{"kind":21,"heading":42,"html":43},"۴. یک تلهٔ رایج: transition روی جای اشتباه","\u003Ch2 id=\"۴-یک-تلهٔ-رایج-transition-روی-جای-اشتباه\">۴. یک تلهٔ رایج: \u003Ccode>transition\u003C\u002Fcode> روی جای اشتباه\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%DB%8C%DA%A9-%D8%AA%D9%84%D9%87%D9%94-%D8%B1%D8%A7%DB%8C%D8%AC-transition-%D8%B1%D9%88%DB%8C-%D8%AC%D8%A7%DB%8C-%D8%A7%D8%B4%D8%AA%D8%A8%D8%A7%D9%87\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا یک اشتباهِ بسیار رایج. خیلی طبیعی است که فکر کنی «تغییر که وقتِ \u003Ccode>:hover\u003C\u002Fcode> اتفاق می‌افتد، پس \u003Ccode>transition\u003C\u002Fcode> را هم باید روی \u003Ccode>:hover\u003C\u002Fcode> بگذارم». بیا امتحانش کنیم — \u003Ccode>transition\u003C\u002Fcode> را از \u003Ccode>.btn\u003C\u002Fcode> بردار و روی \u003Ccode>.btn:hover\u003C\u002Fcode> بگذار:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.btn:hover {\n  background-color: #1d4d6b;\n  transform: scale(1.05);\n  transition: background-color 0.3s ease;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>موس را روی دکمه ببر و بردار. یک چیزِ عجیب می‌بینی: وقتی موس \u003Cstrong>می‌رود\u003C\u002Fstrong> روی دکمه، رنگ نرم تیره می‌شود؛ ولی وقتی موس را \u003Cstrong>برمی‌داری\u003C\u002Fstrong>، رنگ ناگهان می‌پرد به حالتِ اول. نرم می‌رود، تند برمی‌گردد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> transition فقط یک‌طرفه کار می‌کند — نرم می‌رود ولی تند برمی‌گردد؟ علتش این است که \u003Ccode>transition\u003C\u002Fcode> را روی \u003Ccode>:hover\u003C\u002Fcode> گذاشته‌ای. مرورگر همیشه به تنظیماتِ \u003Cstrong>حالتِ فعلی\u003C\u002Fstrong> نگاه می‌کند: وقتی موس روی دکمه است، حالتِ \u003Ccode>:hover\u003C\u002Fcode> فعال است و \u003Ccode>transition\u003C\u002Fcode>ش را می‌بیند، پس رفتن نرم است. ولی همین‌که موس را برداری، دیگر \u003Ccode>:hover\u003C\u002Fcode> فعال نیست و مرورگر به قاعدهٔ پایه نگاه می‌کند — که هیچ \u003Ccode>transition\u003C\u002Fcode> ای ندارد، پس برگشت آنی است. راهِ درست: \u003Ccode>transition\u003C\u002Fcode> را روی قاعدهٔ \u003Cstrong>پایه\u003C\u002Fstrong> (\u003Ccode>.btn\u003C\u002Fcode>) بگذار تا در هر دو جهت دیده شود. آن را از \u003Ccode>:hover\u003C\u002Fcode> بردار و به \u003Ccode>.btn\u003C\u002Fcode> منتقل کن.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>این مهم‌ترین قاعدهٔ این فصل است: \u003Cstrong>\u003Ccode>transition\u003C\u002Fcode> را همیشه روی قاعدهٔ پایه بنویس، نه روی حالتی مثل \u003Ccode>:hover\u003C\u002Fcode>.\u003C\u002Fstrong> آن‌جاست که هم موقعِ رفتن و هم موقعِ برگشتن دیده می‌شود.\u003C\u002Fp>\n",{"kind":21,"heading":45,"html":46},"۵. کد کامل","\u003Ch2 id=\"۵-کد-کامل\">۵. کد کامل\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا نسخهٔ درست و کامل. \u003Ccode>transition\u003C\u002Fcode> روی \u003Ccode>.btn\u003C\u002Fcode> است و \u003Cstrong>دو\u003C\u002Fstrong> property را با هم نرم می‌کند — هم رنگ، هم \u003Ccode>transform\u003C\u002Fcode> — که با کاما از هم جدا می‌شوند. اول \u003Ccode>index.html\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <title>transition<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <button type="button" class="btn">دنبال کردن<\u002Fbutton>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode> — به خطِ \u003Ccode>transition\u003C\u002Fcode> دقت کن: دو تغییر با کاما، و هر دو روی قاعدهٔ پایه:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  background-color: #f6edda;\n  padding: 48px;\n}\n\n.btn {\n  padding: 12px 28px;\n  font-size: 1rem;\n  color: #ffffff;\n  background-color: #2a6b93;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background-color 0.3s ease, transform 0.3s ease;\n}\n\n.btn:hover {\n  background-color: #1d4d6b;\n  transform: scale(1.05);\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-ease-in-snap-out.7fa80332c0.160.webp 160w, \u002F_img\u002F02-image-ease-in-snap-out.7fa80332c0.320.webp 320w, \u002F_img\u002F02-image-ease-in-snap-out.7fa80332c0.640.webp 640w, \u002F_img\u002F02-image-ease-in-snap-out.7fa80332c0.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-ease-in-snap-out.7fa80332c0.1280.jpg\" srcset=\"\u002F_img\u002F02-image-ease-in-snap-out.7fa80332c0.160.jpg 160w, \u002F_img\u002F02-image-ease-in-snap-out.7fa80332c0.320.jpg 320w, \u002F_img\u002F02-image-ease-in-snap-out.7fa80332c0.640.jpg 640w, \u002F_img\u002F02-image-ease-in-snap-out.7fa80332c0.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"دو منحنیِ حرکت کنارِ هم: منحنیِ رفتن که نرم و پله‌پله بالا می‌رود، و منحنیِ برگشت که در حالتِ اشتباه یک پرتگاهِ عمودیِ ناگهانی است\" width=\"1408\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> موس را روی دکمه ببر و بردار. هم رنگ و هم اندازه با هم و نرم عوض می‌شوند، و در هر دو جهت روان‌اند. یک دکمهٔ زنده و حرفه‌ای ساختی، فقط با CSS.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> از دستیار AI ات بپرس «چرا transition من فقط موقعِ رفتنِ موس کار می‌کند و موقعِ برگشتن نه؟». ببین آیا همان علتِ درست را می‌گوید (transition روی \u003Ccode>:hover\u003C\u002Fcode> است نه روی پایه) یا راهِ پیچیده‌تری پیشنهاد می‌کند. جوابش را با چیزی که در بخش ۴ خودت دیدی بسنج، و در آزمایشگاه امتحان کن — \u003Cstrong>اول خودت، بعد AI\u003C\u002Fstrong>.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":48,"html":49},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Ccode>transition\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>ترنزیشن\u003C\u002Ftd>\n\u003Ctd>تغییرِ بینِ دو حالت را در طولِ یک مدت نرم می‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>duration\u003C\u002Ftd>\n\u003Ctd>دیوریشن\u003C\u002Ftd>\n\u003Ctd>مدتِ transition؛ با واحدِ \u003Ccode>s\u003C\u002Fcode> (ثانیه)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>timing-function\u003C\u002Ftd>\n\u003Ctd>تایمینگ-فانکشن\u003C\u002Ftd>\n\u003Ctd>ریتمِ حرکت (\u003Ccode>ease\u003C\u002Fcode>، \u003Ccode>linear\u003C\u002Fcode>، \u003Ccode>ease-in-out\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>delay\u003C\u002Ftd>\n\u003Ctd>دیلِی\u003C\u002Ftd>\n\u003Ctd>مکثِ اختیاری پیش از شروعِ transition\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":51,"heading":52,"html":53},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: چرا اگر \u003Ccode>transition\u003C\u002Fcode> را روی \u003Ccode>:hover\u003C\u002Fcode> بگذاری، حرکت فقط موقعِ رفتنِ موس نرم است و موقعِ برگشتن ناگهانی؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> به همان دکمه یک transition برای \u003Ccode>border-radius\u003C\u002Fcode> هم اضافه کن (سه property با کاما)، و در \u003Ccode>:hover\u003C\u002Fcode> مقدارِ \u003Ccode>border-radius\u003C\u002Fcode> را بزرگ‌تر کن. ببین گوشه‌ها هم نرم گرد می‌شوند.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک \u003Ccode>transition-delay\u003C\u002Fcode> یا جزءِ چهارمِ زمان به transition بده (مثلاً \u003Ccode>transform 0.3s ease 0.2s\u003C\u002Fcode>) و ببین حرکت با کمی مکث شروع می‌شود. در یک جمله بنویس delay چه فرقی با duration دارد.\u003C\u002Fp>\n",{"kind":21,"heading":55,"html":56},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان می‌توانی تغییرِ بینِ دو حالت را نرم کنی — ولی transition فقط از حالتی به حالتِ دیگر می‌رود و همان‌جا می‌ایستد. فصل بعد سراغِ \u003Ccode>@keyframes\u003C\u002Fcode> و \u003Ccode>animation\u003C\u002Fcode> می‌رویم: حرکتی که خودش، بی‌نیاز به موس، پشتِ سرِ هم اجرا می‌شود و می‌تواند چند مرحله داشته باشد. و یک نکتهٔ مهم را یاد می‌گیری: چطور با \u003Ccode>prefers-reduced-motion\u003C\u002Fcode> به کسانی که حرکتِ زیاد اذیتشان می‌کند احترام بگذاری.\u003C\u002Fp>\n",{"course":58,"entitled":66,"lessons":67,"payments_enabled":66,"terms":252,"live":5},{"active_window":59,"effective_price_toman":60,"free":5,"lesson_count":61,"price_toman":62,"slug":63,"summary_fa":64,"title_fa":65},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[68,72,76,80,84,87,90,93,96,100,104,107,110,113,116,119,122,125,128,131,134,138,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,211,212,213,216,219,222,225,228,231,234,237,240,243,246,249],{"free_preview":5,"order":69,"slug":70,"source":8,"term":69,"title_fa":71},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":73,"slug":74,"source":8,"term":69,"title_fa":75},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":77,"slug":78,"source":8,"term":69,"title_fa":79},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":81,"slug":82,"source":8,"term":69,"title_fa":83},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":9,"slug":85,"source":8,"term":69,"title_fa":86},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":12,"slug":88,"source":8,"term":69,"title_fa":89},"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":6,"slug":91,"source":8,"term":69,"title_fa":92},"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":16,"slug":94,"source":8,"term":69,"title_fa":95},"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":97,"slug":98,"source":8,"term":69,"title_fa":99},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":101,"slug":102,"source":8,"term":69,"title_fa":103},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":69,"slug":105,"source":8,"term":73,"title_fa":106},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":73,"slug":108,"source":8,"term":73,"title_fa":109},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":77,"slug":111,"source":8,"term":73,"title_fa":112},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":81,"slug":114,"source":8,"term":73,"title_fa":115},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":9,"slug":117,"source":8,"term":73,"title_fa":118},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":12,"slug":120,"source":8,"term":73,"title_fa":121},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":6,"slug":123,"source":8,"term":73,"title_fa":124},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":16,"slug":126,"source":8,"term":73,"title_fa":127},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":97,"slug":129,"source":8,"term":73,"title_fa":130},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":101,"slug":132,"source":8,"term":73,"title_fa":133},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":135,"slug":136,"source":8,"term":73,"title_fa":137},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":69,"slug":139,"source":8,"term":77,"title_fa":140},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":73,"slug":142,"source":8,"term":77,"title_fa":143},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":77,"slug":145,"source":8,"term":77,"title_fa":146},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":81,"slug":148,"source":8,"term":77,"title_fa":149},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":9,"slug":151,"source":8,"term":77,"title_fa":152},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":12,"slug":154,"source":8,"term":77,"title_fa":155},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":6,"slug":157,"source":8,"term":77,"title_fa":158},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":16,"slug":160,"source":8,"term":77,"title_fa":161},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":97,"slug":163,"source":8,"term":77,"title_fa":164},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":101,"slug":166,"source":8,"term":77,"title_fa":167},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":135,"slug":169,"source":8,"term":77,"title_fa":170},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":69,"slug":172,"source":8,"term":81,"title_fa":173},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":73,"slug":175,"source":8,"term":81,"title_fa":176},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":77,"slug":178,"source":8,"term":81,"title_fa":179},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":81,"slug":181,"source":8,"term":81,"title_fa":182},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":9,"slug":184,"source":8,"term":81,"title_fa":185},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":12,"slug":187,"source":8,"term":81,"title_fa":188},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":6,"slug":190,"source":8,"term":81,"title_fa":191},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":16,"slug":193,"source":8,"term":81,"title_fa":194},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":69,"slug":196,"source":8,"term":9,"title_fa":197},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":73,"slug":199,"source":8,"term":9,"title_fa":200},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":77,"slug":202,"source":8,"term":9,"title_fa":203},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":81,"slug":205,"source":8,"term":9,"title_fa":206},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":9,"slug":208,"source":8,"term":9,"title_fa":209},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},{"free_preview":5,"order":97,"slug":214,"source":8,"term":9,"title_fa":215},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":101,"slug":217,"source":8,"term":9,"title_fa":218},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":69,"slug":220,"source":8,"term":12,"title_fa":221},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":73,"slug":223,"source":8,"term":12,"title_fa":224},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":77,"slug":226,"source":8,"term":12,"title_fa":227},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":81,"slug":229,"source":8,"term":12,"title_fa":230},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":9,"slug":232,"source":8,"term":12,"title_fa":233},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":12,"slug":235,"source":8,"term":12,"title_fa":236},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":6,"slug":238,"source":8,"term":12,"title_fa":239},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":16,"slug":241,"source":8,"term":12,"title_fa":242},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":97,"slug":244,"source":8,"term":12,"title_fa":245},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":101,"slug":247,"source":8,"term":12,"title_fa":248},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":135,"slug":250,"source":8,"term":12,"title_fa":251},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105680]