لماذا لا يعمل تنسيق transition في css3 ؟

محمود سعداوي2 · 9 مايو 2022

السلام عليكم.

أود التوضيح حول عدم تفعيل الخاصية transition في الحالة الأولى في حين م تفعيلها في الحالة الثانية.

الحالة الأولى

.navbar-section{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: var(--color4);
    height: 0;
    transition: height 2s;
  }

الحالة الثانية

.navbar-link{
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color1);
    opacity: 0;
    transition: opacity 1s;
  }

شكرا جزيلا.

محمود سعداوي2 · 9 مايو 2022

بتاريخ 8 دقائق مضت قال أسامة زيادة:
حتى ينجح التنسيق وكما رأيت أمثلة على التجربة يجب إضافة التنسيق آخر مع استخدام hover بهذا الشكل
.navbar-section:hover {
    height: 300px;
  }
بعدها سوف تلاحظ نجاح التأثير .

شكرا.

وقع تطبيق التأثير إلا عندما قمت بتحديد قيمة محددة للخاصية height.

height: auto; لم تعمل في حين height:100px; وقع تفعيل التأثير

شكرا مجددا.

بتاريخ 10 دقائق مضت قال أسامة زيادة:
حتى ينجح التنسيق وكما رأيت أمثلة على التجربة يجب إضافة التنسيق آخر مع استخدام hover بهذا الشكل
.navbar-section:hover {
    height: 300px;
  }
بعدها سوف تلاحظ نجاح التأثير .

شكرا.

وقع تطبيق التأثير إلا عندما قمت بتحديد قيمة محددة للخاصية height.

height: auto; لم تعمل في حين height:100px; وقع تفعيل التأثير

شكرا مجددا.

تم التعديل في 9 مايو 2022 بواسطة محمود سعداوي

أسامة زيادة · 9 مايو 2022

لا أرى أي مشاكل في كتابة التنسيقات في الحالة الأولى ربما المشكلة ليست في التنسيق ، تأكد من الوصول الصحيح للكلاس navbar-section .

يمكنك الاطلاع على المزيد حول الخاصية من هنا transition ، أيضاً يوجد مقال على الأكاديمية حول transition بالتفصيل .

محمود سعداوي2 · 9 مايو 2022

بتاريخ 36 دقائق مضت قال أسامة زيادة:

لا أرى أي مشاكل في كتابة التنسيقات في الحالة الأولى ربما المشكلة ليست في التنسيق ، تأكد من الوصول الصحيح للكلاس navbar-section .

يمكنك الاطلاع على المزيد حول الخاصية من هنا transition ، أيضاً يوجد مقال على الأكاديمية حول transition بالتفصيل .

في الواقع أخي لاتوجد مشكلة و لكن الخاصية transition إذا قمنا بتطبيقها على navbar-section فهي لاتعمل.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foods</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" />
</head>
<body>
<!-- navbar -->
<div class="header-section">
<div class="navbar-section">
    <div class="navbar-link">
    <i class="fas fa-home"></i>
    <span>Home</span>
    </div>
    <div class="navbar-link">
    <i class="fas fa-utensils"></i>
    <span>Meals</span>
    </div>
    <div class="navbar-link">
    <i class="fas fa-hamburger"></i>
    <span>Burger</span>
    </div>
    <div class="navbar-link">
    <i class="fas fa-pizza-slice"></i>
    <span>Pizza</span>
    </div>
    <div class="navbar-link">
    <i class="fas fa-blender-phone"></i>
    <span>Contact</span>
    </div>
</div>
    <div class="menu"></div>
  </div>
<script src="script.js"></script>
</body>
</html>

الأمر محير صديقي.

أسامة زيادة · 9 مايو 2022

بتاريخ 12 دقائق مضت قال محمود سعداوي:

في الواقع أخي لاتوجد مشكلة و لكن الخاصية transition إذا قمنا بتطبيقها على navbar-section فهي لاتعمل.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foods</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" />
</head>
<body>
<!-- navbar -->
<div class="header-section">
<div class="navbar-section">
    <div class="navbar-link">
    <i class="fas fa-home"></i>
    <span>Home</span>
    </div>
    <div class="navbar-link">
    <i class="fas fa-utensils"></i>
    <span>Meals</span>
    </div>
    <div class="navbar-link">
    <i class="fas fa-hamburger"></i>
    <span>Burger</span>
    </div>
    <div class="navbar-link">
    <i class="fas fa-pizza-slice"></i>
    <span>Pizza</span>
    </div>
    <div class="navbar-link">
    <i class="fas fa-blender-phone"></i>
    <span>Contact</span>
    </div>
</div>
    <div class="menu"></div>
  </div>
<script src="script.js"></script>
</body>
</html>

الأمر محير صديقي.

حتى ينجح التنسيق وكما رأيت أمثلة على التجربة يجب إضافة التنسيق آخر مع استخدام hover بهذا الشكل

.navbar-section:hover {
    height: 300px;
  }

بعدها سوف تلاحظ نجاح التأثير .

لماذا لا يعمل تنسيق transition في css3 ؟

السؤال

محمود سعداوي2

4 أجوبة على هذا السؤال

Recommended Posts

محمود سعداوي2

أسامة زيادة

محمود سعداوي2

أسامة زيادة

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية