رفتن به مطلب

transtion برای دکمه حالت هاور


پست های پیشنهاد شده

سلام،

 

من همچین دکمه ای با CSS درست کردم:

image.png.e0b90c9ca31ef732e8a4ece3777d62e8.png

 

و هنگام هاور هم به این شکل همشون تغییر پیدا می کنن:

image.png.76fd548e617ea7f00131dd8df0e1c77a.png

 

برای اینکه این هاور حالت transtion با مقدار مثلاً 0.3 ثانیه بگیره، باید به چه قسمتی transtion رو اعمال کنم؟

(هر جا می ذارم کار نمی کنه)

 

(اگر کسی از دوستان خواستند راهنمایی کنن، آدرس آنلاین سایت و فایل کُد پروژه رو در اختیارشون می ذارم)

لینک به ارسال
در 4 ساعت قبل، mir.seyyed گفته است :

سلام،

من همچین دکمه ای با CSS درست کردم:

و هنگام هاور هم به این شکل همشون تغییر پیدا می کنن:

برای اینکه این هاور حالت transtion با مقدار مثلاً 0.3 ثانیه بگیره، باید به چه قسمتی transtion رو اعمال کنم؟

(هر جا می ذارم کار نمی کنه)

(اگر کسی از دوستان خواستند راهنمایی کنن، آدرس آنلاین سایت و فایل کُد پروژه رو در اختیارشون می ذارم)

سلام، روی استایل خود دکمه کد زیر رو بذارید ببینید جواب میده یا نه:

btn {
    transition: all 0.3s;
}

به جای all هم می‌تونید فقط همون چیزی رو انیمیشن بدید که تغییر میکنه (مثلا width یا... مقدار all میاد و ترنزیشن رو روی کل دکمه اعمال میکنه)

لینک به ارسال
در 20 ساعت قبل، فرشاد گوهری گفته است :

به جای all هم می‌تونید فقط همون چیزی رو انیمیشن بدید که تغییر میکنه (مثلا width یا... مقدار all میاد و ترنزیشن رو روی کل دکمه اعمال میکنه)

بله خیلی ممنون درست شد،

امّا یک مشکل هست:

اگر اون استایل رو به این صورت اعمال کنم:،

btn {
    transition: all 0.3s;
}

هنگامی که صفحه بار گذاری میشه تمام استایل هایی که بهش اعمال کردم( مثل border, margin, padding, backround) همشون با حالت transition بارگزاری میشن

و اگر به این طور استایل بدم،:

btn:hover {
    transition: all 0.3s;
}

اون مشکل دیگه نیست امّا هنگامی که موس رو از روی دکمه بر می داریم و از hover میاد بیرون، بدون transition هست و این جالب نیست(((این مشکل در حالت اول نیست)))

 

ممنون میشم راهنمایی کنید.

.

در در ۱۳۹۹/۱۰/۳ در 02:49، mir.seyyed گفته است :

(اگر کسی از دوستان خواستند راهنمایی کنن، آدرس آنلاین سایت و فایل کُد پروژه رو در اختیارشون می ذارم)

 

لینک به ارسال
در 3 ساعت قبل، mir.seyyed گفته است :

هنگامی که صفحه بار گذاری میشه تمام استایل هایی که بهش اعمال کردم( مثل border, margin, padding, backround) همشون با حالت transition بارگزاری میشن

به جای all دقیقا اسم همون ویژگی رو بنویسید که اون انیمیشن رو باهاش ساختید، مثلا اگر با background درست کردید، این شکلی بنویسید:

btn {
    transition: background 0.3s;
}

 

در 3 ساعت قبل، mir.seyyed گفته است :

تنها این دکمه ها اینطوری نیستند، المان های دیگه هم هستند که اینطوری اند و نمیدونم چطور مشکل رو برطرف کنم.

منظورتون اینه که می‌خواین این انیمیشن رو به همه‌ی المان‌ها اعمال کنید؟

لینک به ارسال
در 3 ساعت قبل، فرشاد گوهری گفته است :

منظورتون اینه که می‌خواین این انیمیشن رو به همه‌ی المان‌ها اعمال کنید؟

مثل اینکه نتونستم منظورم رو با متن بیان کنم،

 

بهمین دلیل لطفاً این ویدئو رو ببینید:

 

لینک به ارسال
در 11 ساعت قبل، mir.seyyed گفته است :

مثل اینکه نتونستم منظورم رو با متن بیان کنم،

بهمین دلیل لطفاً این ویدئو رو ببینید:

متوجه شدم، ببینید تا جایی که من دیدم، این باکس شما اول در صفحه وجود نداره و بعد از لود صفحه ظاهر میشه، خب طبیعتا وقتی این اتفاق میفته انیمیشن هم اعمال میشه روش، مگر اینکه از همون اول در صفحه نمایش داده بشه، نمیشه بهش گفت مشکل و در اصل به شکل پیش‌فرض اینجور هست، البته شاید هم راهی داشته باشه ولی متاسفانه من اطلاعی ندارم، هرچند با JS هم می‌تونید این انیمیشن رو روش اعمال کنید که حدس میزنم دیگه این مشکل رو نداشته باشید.

لینک به ارسال
در 3 ساعت قبل، فرشاد گوهری گفته است :

متوجه شدم، ببینید تا جایی که من دیدم، این باکس شما اول در صفحه وجود نداره و بعد از لود صفحه ظاهر میشه، خب طبیعتا وقتی این اتفاق میفته انیمیشن هم اعمال میشه روش، مگر اینکه از همون اول در صفحه نمایش داده بشه، نمیشه بهش گفت مشکل و در اصل به شکل پیش‌فرض اینجور هست، البته شاید هم راهی داشته باشه ولی متاسفانه من اطلاعی ندارم، هرچند با JS هم می‌تونید این انیمیشن رو روش اعمال کنید که حدس میزنم دیگه این مشکل رو نداشته باشید.

خیل ممنون از لطفتون، امّا من js بلد نیستم.

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...