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

محمود_سعداوي · 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;
  }

شكرا جزيلا.

محمود_سعداوي · 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 بالتفصيل .

محمود_سعداوي · 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 ؟

السؤال

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

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

Recommended Posts

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

رابط هذا التعليق

شارك على الشبكات الإجتماعية

أسامة زيادة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

رابط هذا التعليق

شارك على الشبكات الإجتماعية

أسامة زيادة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية