zowshoorjch baina vvgvi gsen iin dawtsuulahgvi bolgo zuhdaahdan dahtsahgv bolgo
"Үгүй" товч зугтахдаа "Зөвшөөрч байна" товчтой давхцахгүй байхаар засъя.
"Үгүй" товч баруун талд байгаа тул зугтахдаа зөвхөн баруун/доош чиглэлд шилжиж, "Зөвшөөрч байна" товчтой давхцахгүй байхаар засъя.
Товчны байршлыг шалгая - "Зөвшөөрч байна" болон "Үгүй" товч хоорондоо хангалттай зайтай байх ёстой:
Одоо preview-д шалгая - "Үгүй" товч зөвхөн баруун тийш зугтах ёстой:
Захиа гоё харагдаж байна. Доош scroll хийж товчнуудыг харъя:
Асуудал харагдлаа - "Үгүй" товч анхдагч байрлалдаа "Зөвшөөрч байна" товчтой давхцаж байна. Layout-г засаж, хоёр товчийг зэрэгцүүлж, "Үгүй" товч зөвхөн баруун/доош зугтдаг болгоё.
Одоо "Үгүй" товч анх "Зөвшөөрч байна" товчны баруун талд зэрэгцэн байна. Зугтахдаа зөвхөн баруун болон дээш/доош шилждэг тул давхцахгүй. Шалгая:
Одоо "Зөвшөөрч байна" болон "Үгүй" товчнууд зэрэгцэн, давхцахгүй зөв байрласан байна. "Үгүй" товч дээр hover хийж зугтаж байгааг шалгая:
Төгс! "Үгүй" товч дээр hover хийхэд баруун дээш зугтсан бөгөөд "Зөвшөөрч байна" товчтой огт давхцахгүй байна. Browser хааж дуусгая:
Засвар хийгдлээ. Одоо "Зөвшөөрч байна" болон "Үгүй" товчнууд зэрэгцэн зөв байрласан бөгөөд анхдагч байрлалдаа давхцахгүй болсон. "Үгүй" товч дээр hover хийхэд зөвхөн баруун болон дээш/доош зугтдаг тул "Зөвшөөрч байна" товчтой хэзээ ч давхцахгүй болсон.
endeer bas 7 sard gsen vg nem bas vgvi gsen towch ni delgetsneesee garsan ch bvten harddag bolgo bas vgvi gseniin hurdan zuhdaadg bolgo udaan bn
Зураг дээр ягаан 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 хийсний дараа үүсдэг болгосон
vseniihan hemjeen jijg tom bn negn jiged bolgo vgvi gsen towch ni zowhen deshee dooshoo zuhdag bolgo