• 1399/01/10

css-transition و حرکت المانها در زمان لود شدن صفحه وب :

سلام
اول از قرار دادن ویدیوهای اموزشی کمال تشکر رو دارم و امیدوارم که همیشه سالم و‌موفق باشید
من ی سوال در مورد css داشتم که هر چی‌ دنبال جوابش گشتم به نتیجه نرسیدم امیدوارم شما بتونید کمکم کنید.
زمانی که transition رو برای والد قرار میدم margin و padding هم با تاخییر انجام میشه یعنی مثلا دکمه از چپ تصویر وارد میشه و میره سر جاش قرار میگیره ! که این کل صفحه رو به هم میریزه
اگر transition رو به hover بدم هم برگشت المان زمانی که روش hover نباشیم خیلی سریع میشه و خوب نیست.

1- من برای مشکل اولیه نمی دونم چطور transition بدم که هم وقتی hover نیست با تاخیر برگرده ?

2-المان والد هم همه چیزش با تاخیر انجام نشه... وقتی صفحه لود میشه حرکت نکنه ...  یعنی  مثلا transition باعث نشه المان حرکت کنه در زمان لود شدن صفحه به دلیل margin !  ؟ 

با تشکر از زحمات شما

  • 1399/01/10
  • ساعت 20:42

با سلام خدمت شما همراه عزیز

 

لطفا نمونه کدتون رو قرار بدید


  • 1399/01/10
  • ساعت 20:58

با سلام

زمانی که صفحه لود میشود به دلیل استفاده از 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;
}

 


  • 1399/01/10
  • ساعت 21:06

من والا منظورتونو دقیقا متوجه نشدم

 

از کار خروجی گرفتم اما هنگام لود شدن تغییری احساس نکردم


logo-enamadlogo-samandehi