تغییر transition و Display یک div با جاواسکریپت

سوال: ما در صفحه سایت خود یک div داریم که دیسپلی اون none هست و میخواهیم به کمک transition دیس پلی اون با زمان ۱ ثانیه block بشه به کمک جاواسکریپت؟

بله، می توانید با استفاده از جاوا اسکریپت این کار را انجام دهید. برای این منظور، ابتدا به div خود یک شناسه یا کلاس بدهید تا بتوانید آن را در جاوا اسکریپت پیدا کنید. سپس با استفاده از تابع setTimeout و تغییر مقدار display به “block” و تعیین زمان 1 ثانیه، می توانید تغییر transition را اعمال کنید.

این کد را در بلاک <script> قرار دهید:

// پیدا کردن div با استفاده از شناسه یا کلاس
var myDiv = document.getElementById("myDiv");
// تنظیم transition در دیو
myDiv.style.transition = "display 1s";
// تنظیم timeout برای تغییر display
setTimeout(function() {
  myDiv.style.display = "block";
}, 1000);

در این مثال، فرض کنید شناسه div شما “myDiv” است. این کد با استفاده از تابع setTimeout، display را پس از 1 ثانیه به “block” تغییر می دهد و از اثر transition نیز استفاده می کند.

تغییر transition و Display یک div با جاواسکریپت

برای تغییر ترانزیشن و نمایش یک div با استفاده از جاواسکریپت میتوانیم از این کد استفاده کنیم:

HTML:

<button onclick="toggleDiv()">تغییر ترانزیشن و نمایش دیو</button>

<div id="myDiv" style="display: none;"></div>

CSS:

.my-div {
  transition: all 1s ease;
}

JavaScript:

function toggleDiv() {
  var div = document.getElementById('myDiv');

  if (div.style.display === 'none') {
    div.style.display = 'block';
    div.classList.add('my-div');
  } else {
    div.style.display = 'none';
    div.classList.remove('my-div');
  }
}

در این مثال، با کلیک بر روی دکمه “تغییر ترانزیشن و نمایش دیو”، تابع toggleDiv فراخوانی میشود. ابتدا از طریق getElementById، دیو مورد نظر را دریافت میکنیم. سپس با بررسی وضعیت نمایش فعلی دیو، آن را تغییر می دهیم. اگر نمایش دیو none باشد، آن را به block تغییر می دهیم و کلاس my-div از طریق classList به دیو اضافه می کنیم. در این حالت، ترانزیشن روی دیو اعمال میشود. اگر نمایش دیو block باشد، آن را به none تغییر می دهیم و کلاس my-div را از دیو حذف می کنیم.