انیمشن دادن در html

Printable View

پنج شنبه 14 تیر 1397, 19:29 عصر
shahin53

انیمشن دادن در html

سلام
ببخشید من یک سوال داشتم:

من امروز می خوام کار کردن با انیمیشن ها رو یاد بگیرم و البته نسبت به سنم کمی دیر شده اما خب چه میشه کرد به قول قدیمی ها گذر پوست به دباغ خونه میفته.

من یک div درست کردم و گفتم هروقت که عرض این div تغییر کرد تغییر عرض در زمان دو ثانیه انجام بشه. اما کد کار نمی کنه:

کد HTML:

<!DOCTYPE html> <html> <head> <style> div { width: 0; height: 0; background: red; transition: width 2s; display: none; } /*div:hover { width: 300px; } */ .mystyle { width: 100px; height: auto; padding: 25px; background-color: coral; color: white; font-size: 25px; display: block; } </style> </head> <body> <h1>The transition Property</h1> <p>Hover over the div element below, to see the transition effect:</p> <div id="mor"> <p>ali</p> <p>ali</p> <p>ali</p> <p>ali</p> <p>ali</p> <p>ali</p> <p>ali</p> <p>ali</p> </div> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> <button onclick="myFunction()">Click me</button> <p id="demo"></p> <script type="text/javascript"> let a = 1; let element = document.getElementById("mor"); function myFunction() { // document.getElementById("mor").innerHTML = "Hello World"; if (a ===1) { element.classList.add("mystyle"); a=0; } else if (a===0) { a = 1; element.classList.remove("mystyle"); } } </script> </script> </body> </html>

چیزی که بیشتر هم عچیبه اینه که اگر اون قسمت کد که کامنتش کردم رو از حالت کامنت خارج کنم کار مییکنه.

خیلی ممنون میشم اگه کسی بنده رو راهنمایی کنه
پنج شنبه 14 تیر 1397, 20:02 عصر
nazanin_asadi_1

نقل قول: انیمشن دادن در html

اگه براتون مقدوره سعی کنین از کتابخانه ها استفاده کنین مخصوصا Jquery
کد نویسی با Jquery خیلی کار ها رو راحت میکنه مثلا برای درخواست شما فقط کافیه کد زیر رو بنویسی

کد HTML:

<div id="id1" clas="mystyle"></div> <script type="text/javascript"> myFunction=function(){ $("#id1").slideToggle(800); } </script>

اگه بدون کتابخانه میخوای یه نمونه تویه لینک زیر هست
https://jsfiddle.net/cferdinandi/qgpxvhhb/40/
میتونی یه نیگاه بندازی بهش
شنبه 16 تیر 1397, 15:07 عصر
shahin53

نقل قول: انیمشن دادن در html

از جی کوئری نمیخوام استفاده کنم.
دست شما درد نکنه بابت لینکی که فرستادید.

ممنون میشم دلیل اینکه قطعه کدی که خودم نوشتم کار نمی کنه رو بگید.
چون تا خودم منطق کار رو نفهمم نگاه کردن به کدهای پیشرفته تر کمکی بهم نمی کنه.
دوشنبه 18 تیر 1397, 00:07 صبح
nazanin_asadi_1

نقل قول: انیمشن دادن در html

نقل قول:

نوشته شده توسط shahin53

از جی کوئری نمیخوام استفاده کنم.
دست شما درد نکنه بابت لینکی که فرستادید.

ممنون میشم دلیل اینکه قطعه کدی که خودم نوشتم کار نمی کنه رو بگید.
چون تا خودم منطق کار رو نفهمم نگاه کردن به کدهای پیشرفته تر کمکی بهم نمی کنه.

این کدی که من قرار دادم از Jquery استفاده کردم خیلی ساده و راحت

نمی فهمم چرا نمی خواین از Jquery استفاده بکنین دلیل خاصی دارین ؟
دوشنبه 12 شهریور 1397, 16:51 عصر
y_dehghan

نقل قول: انیمشن دادن در html

کار با انیمیشن در html و با css3 ساده است، شاید لینک زیر به شما کمک کنه
https://www.datadars.com/css/css-adv...s3_animations/