سلام
اول از قرار دادن ویدیوهای اموزشی کمال تشکر رو دارم و امیدوارم که همیشه سالم وموفق باشید
من ی سوال در مورد css داشتم که هر چی دنبال جوابش گشتم به نتیجه نرسیدم امیدوارم شما بتونید کمکم کنید.
زمانی که transition رو برای والد قرار میدم margin و padding هم با تاخییر انجام میشه یعنی مثلا دکمه از چپ تصویر وارد میشه و میره سر جاش قرار میگیره ! که این کل صفحه رو به هم میریزه
اگر transition رو به hover بدم هم برگشت المان زمانی که روش hover نباشیم خیلی سریع میشه و خوب نیست.
1- من برای مشکل اولیه نمی دونم چطور transition بدم که هم وقتی hover نیست با تاخیر برگرده ?
2-المان والد هم همه چیزش با تاخیر انجام نشه... وقتی صفحه لود میشه حرکت نکنه ... یعنی مثلا transition باعث نشه المان حرکت کنه در زمان لود شدن صفحه به دلیل margin ! ؟
با تشکر از زحمات شما
با سلام خدمت شما همراه عزیز
لطفا نمونه کدتون رو قرار بدید
با سلام
زمانی که صفحه لود میشود به دلیل استفاده از transition روی المان والد حرکت دکمه از سمت چپ تصویر کاملا مشهود است
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="style.css">
<title>mostafa</title>
</head>
<body>
<div class="as"><span class="d">click me</span></div>
</body>
</html>
css
div.as{
width: 150px;
height: 70px;
background-color: #f4511e;
border: none;
color: #fff;
display: inline-block;
margin: 10px 600px;
position: absolute;
padding: 20px;
text-align: center;
text-transform: capitalize;
font-size: 30px;
cursor: pointer;
transition-duration: 1s;
}
.as:hover span {
padding-right: 15px;
transition: 0.5s;
}
.as span::after{
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: 10px;
padding: 20px;
transition: 0.2s;
}
.as:hover span::after{
opacity: 1;
right: 25px;
}
من والا منظورتونو دقیقا متوجه نشدم
از کار خروجی گرفتم اما هنگام لود شدن تغییری احساس نکردم