تخفیف ویژه هفته کتاب و کتاب خوانی، فرصت یادگیری با 40٪ تخفیف (کد تخفیف: Ketab)
زمان باقی مانده تخفیف ویژه (تمدید شد)
سبد (0)

تبلیغات

انتقال یا گذر در CSS3

Transition یا انتقال در CSS3

Wiki

در CSS3، در صورت تغییر ویژگی های یک عنصر، می توانیم این تغییر را بصورت تدریجی مشاهده نماییم. (بدون استفاده از Flash یا JavaScript)


پشتیبانی مرورگرها از خصوصیت Transition

Wiki

خاصیتپشتیبانی مرورگرها
transition

مرورگرهای Internet Explorer 10, Firefox, Chrome, Opera خصوصیت transition را پشتیبانی می کنند.

مرورگر Safari به پیشوند -webkit- نیاز دارد.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.

توجه: مرورگر Chrome 25 و نسخه های قبلی آن، به پیشوند -webkit- نیاز دارد.


Transition چگونه کار می کند؟

Wiki

transition در CSS3، افکتی است که اجازه می دهد یک عنصر از یک Style به Styleی دیگر بتدریج تغییر نماید.

برای انجام آن، حداقل باید دو چیز را مشخص نمایید:

  • خصوصیت CSSی که می خواهید انتقال در ازای تغییر آن انجام شود.

  • مدت زمان انجام انتقال

مثال (انتقال یا گذر در CSS3)

انتقال روی خصوصیت width، با مدت زمان 2 ثانیه:

div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

توجه: در صورتی که هیچ زمانی تنظیم نشود، افکتی رخ نخواهد داد چون زمان پیش فرض 0 ثانیه است.

افکت زمانی رخ می دهد که مقدار خصوصیت مشخص شده در transition تغییر کند. به عنوان نمونه این تغییر می تواند زمانی رخ دهد که موس روی عنصر، قرار می گیرد:

مثال (انتقال یا گذر در CSS3)

مشخص کردن hover: برای عنصر <div>:

div:hover
{
width:300px;
}
خودتان امتحان کنید »

توجه: زمانی که موس از روی عنصر خارج می شود، width عنصر بتدریج به مقدار اولیه خود تغییر می کند.


تنظیم همزمان چند تغییر در Transition

Wiki

با جدا کردن خصوصیت ها و زمان با کاما می توانید همزمان چند تغییر را تعریف کنید:

مثال (انتقال یا گذر در CSS3)

اضافه کردن افکت روی width، height و transform:

div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
خودتان امتحان کنید »

خصوصیت های انتقال در CSS3

Wiki

در جدول زیر، لیست تمام خصوصیت های انتقال آورده شده است:

خصوصیتتوضیحاتCSS
transition تمام خصوصیت های انتقال را بصورت مختصر مشخص می کند. 3
transition-property نام خصوصیت CSSی است که اگر بنحوی تغییر کند، انتقال یا transition صورت می گیرد. 3
transition-duration مدت زمان انتقال را مشخص می کند. مقدار پیشفرض 0 است. 3
transition-timing-function در طول یک انتقال، نحوه انجام آن را مشخص می کند. مقدار پیشفرض "ease" است. 3
transition-delay بعد از چه مدت، انتقال شروع شود. مقدار پیشفرض 0 است. 3

در دو مثال زیر، از تمام خصوصیت های انتقال استفاده شده است:

مثال (انتقال یا گذر در CSS3)

استفاده از تمام خصوصیت های انتقال در یک مثال:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
خودتان امتحان کنید »

مثال (انتقال یا گذر در CSS3)

تنظیم تمام خصوصیت های مثال قبل، با استفاده از خصوصیت مختصر transition:

div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
خودتان امتحان کنید »

دیدگاه‌ها  

0 # Milad 1394-07-27 17:24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E N" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet " href="/style.css " type="text/css" />
<meta http-equiv="Con tent-Type" content="text/h tml; charset=iso-885 9-1" />
<title>Untitled Document</title>
</head>

<body>

<div id="right-menu">
<img id="right-menu- icon" src="/../eshop/t ak.png" /><div id="right-menu- icon-title"> Digital Dreams</div>
</div>

<div id="main-content">main-content</div>

</body>
</html>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-07-27 21:35
دوست عزیز یه مقدار کدت رو تغییر دادم. ارتفاع دیو راست کم شد ولی چیزی که می‌خواستی اکی شده.
برای اینکه ارتفاع دیو راست کل صفحه رو بگیره،‌باید دو سه تا خاصیت CSS بهش بدی. البته داده بودی، من حذفش کردم. اگه میذاشتم، درست شدن دیو بغلیش داستان دار می‌شد.

سعی کردم بدون جاوااسکریپت درستش کنم. با جاوااسکریپت میشه چیز دلخواه رو به دست آورد، ولی با CSS فکر نمی‌کنم. (مطمئن نیستم، شاید باشه!!!)
کد کامل در زیر ببینید:

<!DOCTYPE html PUBLIC "-//W3C//D TD XHTML 1.0 Transitional//E N" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="style sheet " href="styl e.css " type="text /css" />
<meta http-equiv=&quo t;Con tent-Type" content="t ext/h tml; charset=iso-885 9-1" />
<title>Untitled Document</title>
<style>

body{overflow-x:hidden;padding:0;margin:0;direction:rtl;}

#right-menu {
background:#333333;
width:64px;
height:90%;
margin-left:10px;
float:right;
transition:width 0.3s;
}

#right-menu:hover {
width:150px;
}

#right-menu-icon{
height:50px;
width:50px;
border:solid 0px #999999;
left:5px;
top:10px;
position:absolute;
float:right;
}

#right-menu-icon-title{
width:auto;
height:50px;
border:solid 1px #CCCCCC;
left:64px;
position:absolute;
left:64px;
}

#main-content{
background:#CCCCCC;
color:#000000;
padding:5px;
line-height:15px;
border:solid 1px #999999;
display:block;
width:650px;
height:100%;
position:relative;
float:right;
padding: 10px;
}
</style>
</head>

<body>

<div id="right-menu">
<img id="right- menu- icon" src="../es hop/t ak.png" /><div id="right- menu- icon-title" ;> Digital Dreams</div>
</div>
<div id="main-content">main-content</div>
</body>
</html>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # Milad 1394-07-27 14:45
سلام و خسته نباشید .
قبل از اینکه سوالمو بپرسم لازمه بخاطر زحماتتون ازتون تشکر کنم . اجرتون با امام حسین .
من میخوام وقتی موس رو روی یه div میبرم transition روی تمام div های داخل div اولیه اجرا بشه . آیا یه همچین چیزی ممکنه ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-07-27 15:09
با سلام.
برای اینکه به div مادر یه کلاس یا ID خاص بدید. بعدش توسط علامت < میتونید تمامی divهایی که داخل این div خاص هستند رو انتخاب و توسط سلکتور hover:: بهش اکشن بدید.

<style>
   #MyDIV > div::hover{
      transition : ...;
   }
</style>


<div id="MyDIV">
   <div>content 1</div>
   <div>content 2</div>
   <div>content 3</div>
   <div>content 4</div>
   <div>content 5</div>
</div>

پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # Milad 1394-07-27 23:40
ممنون آقای صلاحی ،
مثل همیشه دقیق و سریع . البته من تو پرسیدن سوال دوم یکم عجله کردم . شما جوابو توی پاسخ همون سوال اولم داده بودید فقط کمی طول کشید متوجه بشم . با راهنمایی شما و یکم مطالعه بیشتر مطالب سایت مشکلم حل شد .
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-07-28 07:06
خواهش میکنم.

موفق باشید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # Milad 1394-07-27 16:55
ممنون از پاسخ سریعتون ولی من نتونستم منظورمو خوب بیان کنم .
کد:
body{overflow-x:hidden;padding-right:64px;direction:rtl;}

#right-menu {
background:#333333;
width:64px;
height:100%;
position:absolute;
float:right;
right:0px;
top:0px;
transition:width 0.3s;
}

#right-menu:hover {
width:150px;
}

#right-menu-icon{
height:50px;
width:50px;
border:solid 0px #999999;
left:5px;
top:10px;
position:absolute;
float:right;
}

#right-menu-icon-title{
width:auto;
height:50px;
border:solid 1px #CCCCCC;
left:64px;
position:absolute;
left:64px;
}

#main-content{
background:#CCCCCC;
color:#000000;
padding:5px;
line-height:15px;
border:solid 1px #999999;
display:block;
width:650px;
height:100%;
position:relative;
float:right;
}



منظور من اینه که میخوام دیو main-content هم همراه با دیو right-menu تحت تاثیر اکشنی که میدم قرار بگیره و به اندازه width:main-menu به right:main-cont etnt اضافه بشه .
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-07-27 17:10
خواهش میکنم.
کد html. رو هم امکانش هست قرار بدید؟؟ (فقط علامت > و < رو در نظر داشته باشید.)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # uran 1394-05-10 00:45
سلام
من یک شی درست کردم که 50% به سمت چپ حرکت می کند
من می خواهم وقتی به انتهای مقصد رسید یعنی 50% دیگر از ابتدا شروع نشود یعنی همانجا بماند
باید چی کار کنم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-07-27 15:14
با سلام.
در صورت امکان کد خودتون رو قرار بدید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # #ali 1394-05-06 08:24
با سلام و خداقوت
توی مثال که نوشتید linear چه کار می کنه؟ دیگه چه چیزی هایی هستند؟
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-05-06 18:16
سلام
نحوه ی آنالیز سرعت افکت از ابتدا تا انتها با خصوصیت transition-timi ng-function تعیین می شود. این خصوصیت می توانید مقادیر زیر را بپذیرد:
ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|initial|inherit

linear به این معنی است که سرعت انجام افکت transition به صورت خطی باشد که این یعنی از ابتدا تا انتهای افکت، سرعت ثابت باشد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # mahde 1392-12-28 19:12
دمتون گرم کارتون درسته :lol: :lol: :lol: :lol: :lol:
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS3

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
تبلیغات اینترنتی