"Үгүй" товч зугтахдаа "Зөвшөөрч байна" товчтой давхцахгүй байхаар засъя.
"Үгүй" товч баруун талд байгаа тул зугтахдаа зөвхөн баруун/доош чиглэлд шилжиж, "Зөвшөөрч байна" товчтой давхцахгүй байхаар засъя.
Товчны байршлыг шалгая - "Зөвшөөрч байна" болон "Үгүй" товч хоорондоо хангалттай зайтай байх ёстой:
Одоо preview-д шалгая - "Үгүй" товч зөвхөн баруун тийш зугтах ёстой:
Захиа гоё харагдаж байна. Доош scroll хийж товчнуудыг харъя:
Асуудал харагдлаа - "Үгүй" товч анхдагч байрлалдаа "Зөвшөөрч байна" товчтой давхцаж байна. Layout-г засаж, хоёр товчийг зэрэгцүүлж, "Үгүй" товч зөвхөн баруун/доош зугтдаг болгоё.
Одоо "Үгүй" товч анх "Зөвшөөрч байна" товчны баруун талд зэрэгцэн байна. Зугтахдаа зөвхөн баруун болон дээш/доош шилждэг тул давхцахгүй. Шалгая:
Одоо "Зөвшөөрч байна" болон "Үгүй" товчнууд зэрэгцэн, давхцахгүй зөв байрласан байна. "Үгүй" товч дээр hover хийж зугтаж байгааг шалгая:
Төгс! "Үгүй" товч дээр hover хийхэд баруун дээш зугтсан бөгөөд "Зөвшөөрч байна" товчтой огт давхцахгүй байна. Browser хааж дуусгая:
Засвар хийгдлээ. Одоо "Зөвшөөрч байна" болон "Үгүй" товчнууд зэрэгцэн зөв байрласан бөгөөд анхдагч байрлалдаа давхцахгүй болсон. "Үгүй" товч дээр hover хийхэд зөвхөн баруун болон дээш/доош зугтдаг тул "Зөвшөөрч байна" товчтой хэзээ ч давхцахгүй болсон.
Зураг дээр ягаан badge дотор "Чамайг болзоонд урьж байна" гэсэн текст байна. Одоо 3 зүйлийг засъя: "7 сард" нэмэх, "Үгүй" товч дэлгэцнээс гарсан ч бүтэн харагдах, хурдан зугтдаг болгох.
Гурван засвар хийе: "7 сард" нэмэх, "Үгүй" товчийг хурдан зугтдаг болгох, дэлгэцнээс гарахгүй бүтэн харагдах байхаар хязгаарлах.
Одоо "Үгүй" товчийг хурдан зугтдаг (transition хурдан), дэлгэцнээс гарахгүй жижиг хязгаартай болгоё:
Одоо transition-ийг хурдан болгож, onMouseMove нэмж илүү мэдрэмжтэй (хурдан зугтдаг) болгоё:
Одоо preview-д шалгая:
Дугтуй дээр дарж нээе. Координатаар дарж үзье:
Захиа нээгдэж байна. Дээш scroll хийж захиаг харъя. Гэхдээ "1 Issue" гарч байна - эхлээд алдааг шалгая:
"7 сард чамайг болзоонд урьж байна" текст харагдаж байна. Доош scroll хийж товчнуудыг харж, "Үгүй" товчийг hover хийе:
Бүх зүйл зөв ажиллаж байна! "7 сард чамайг болзоонд урьж байна" badge харагдаж байна, "Үгүй" товч баруун дээш зугтсан бөгөөд бүтэн харагдаж, "Зөвшөөрч байна" товчтой давхцахгүй байна. Одоо "1 Issue"-г шалгая:
"1 Issue" нь hydration warning — Math.random() нь сервер болон клиент дээр өөр утга үүсгэдгээс болсон. Үүнийг засаж, зүрх/гялбаа зөвхөн клиент дээр mount хийсний дараа үүсдэг болгоё:
"1 Issue" мэдэгдэл алга болж, hydration алдаа зассан байна. Бүх засвар амжилттай:
Гурван засвар бүгд хийгдлээ:
- "7 сард" нэмж "7 сард чамайг болзоонд урьж байна" болгосон
- "Үгүй" товчийг хурдан зугтдаг болгосон (spring stiffness 700, onMouseMove нэмсэн) бөгөөд жижиг хязгаарт зугтдаг тул дэлгэцнээс гарахгүй үргэлж бүтэн харагдана
- Hydration алдаа (1 Issue) зассан — хөвөгч зүрх болон гялбаа зөвхөн клиент дээр mount хийсний дараа үүсдэг болгосон