رسوم متحركة لنقرة عنصر قائمة الموضوع

← املأ “repoName” و “repoURL” لزر التثبيت التلقائي →

تثبيت مكون السمة هذا

← صف هذه السمة/المكون في جملة أو جملتين →

يضيف مكون السمة هذا رسومًا متحركة لطيفة عند تمرير مؤشر الفأرة فوق عنصر قائمة الموضوع أو النقر عليه.

← أضف المزيد من التفاصيل واشرح الإعدادات (إن وجدت) →

مرحباً :wave:

:warning: يتطلب المكون مُحمّل شريط تمرير.

يجعل هذا المكون الصف بأكمله قابلاً للنقر ويضيف رسومًا متحركة للنقر إلى عنصر قائمة الموضوع. يمكنك الاختيار من بين بعض الرسوم المتحركة.

  1. push (افتراضي على الأجهزة التي تعمل باللمس): عند النقر عليه، فإنه يندفع للداخل ويضيف تأثير خلفية.

  2. background (افتراضي على الأجهزة التي لا تعمل باللمس): عند النقر عليه، فإنه يضيف خلفية…

  3. slider: عند النقر عليه، فإنه يضيف مُحمّل شريط تمرير أسفل عنصر قائمة الموضوع ويخفي شريط التمرير الرئيسي العلوي.


  4. blur: عند النقر عليه، فإنه يطمس الموضوعات الأخرى في القائمة.


إعدادات السمة

يمكنك تحديد الرسوم المتحركة بشكل منفصل على الأجهزة التي لا تعمل باللمس والأجهزة التي تعمل باللمس.

23 إعجابًا

لقد بدا وبدا طبيعيًا جدًا لدرجة أنني لم أستطع رؤية ما تغير عندما قمت بمعاينة المكون. :smile:

هل سيكون من الممكن الحصول على رسوم متحركة للدفع عند النقر على سطح المكتب، أثناء التحميل، أم أن هناك أي شيء يمنع ذلك بأي شكل من الأشكال؟

6 إعجابات

الفكرة وراء هذا هي إنشاء نقرة طبيعية شبيهة بالتطبيق على الأجهزة التي تعمل باللمس. لذا فإن الرسوم المتحركة للدفع تعمل أيضًا في عرض سطح المكتب إذا كان جهازًا يعمل باللمس.

لكن نعم، أعتقد أنه يمكن أن يعمل بسهولة على الأجهزة التي لا تعمل باللمس أيضًا. ربما يستحق إعدادًا إضافيًا. :slightly_smiling_face:

4 إعجابات

مرحباً :wave:

لقد دفعت تحديثًا للمكون. DEV: Refactored how the component works and add a new slider animation by VaperinaDEV · Pull Request #1 · VaperinaDEV/topic-list-item-click-animation · GitHub

إعجابَين (2)

هذا عمل جيد جداً. عمل رائع كالعادة يا دون. :slight_smile:

إعجابَين (2)

مرحباً :wave:
رسوم متحركة جديدة (ضبابية) :tada:

إعجابَين (2)

ذكي. يعجبني :heart_eyes:

3 إعجابات

عمل رائع يا دون! لقد جربت هذا مع Topic List Thumbnails ويعمل بشكل جيد في الغالب دون الحاجة إلى تعديلات. يعمل Push و Blur كما هو متوقع، ولكن Slider يظهر في أعلى جميع الصور المصغرة بدلاً من أن يتبع الصورة المصغرة، والخلفية لا تفعل شيئًا (وهو أمر منطقي). هل هناك أي فرصة لتقديم المزيد من الاهتمام لهذا؟ أود الحصول على شريط التمرير على سطح المكتب، أو أي فكرة رائعة أخرى أنا متأكد من أنك ستتوصل إليها!

إعجاب واحد (1)

مرحباً ديفيد :wave:

لقد قمت بدمج تحديث Move topic slider loader from template to pseudo element by VaperinaDEV · Pull Request #5 · VaperinaDEV/topic-list-item-click-animation · GitHub
لقد استخدمت قالب after-topic-list-item الخاص بـ plugin outlet لعرض المنزلق ولكن مكون Topic List Thumbnails يضيف تخطيط شبكي إلى قائمة المواضيع مما يعني أنه يتعامل مع plugin outlet كعنصر في قائمة المواضيع ويدفعها بجانب بعضها البعض. الآن قمت بنقل المحمل من القالب إلى عنصر زائف مما سيزيد من التوافق. :slightly_smiling_face:


لقد نسيت إضافة z-index إليه وهو مطلوب لإظهاره مع Topic List Thumbnail. يرجى تحديث المكون. :slightly_smiling_face:

إعجاب واحد (1)

شكراً لك يا دون! لقد جربت ذلك وهو يعمل، لكن لون شريط التمرير ليس صحيحاً، أو ربما تكون مشكلة في ترتيب الطبقات (z-index)؟ يجب أن يكون شريط التمرير في هذا الفيديو باللون الذهبي ولكنه رمادي. أعتقد أنه يجب أن يكون اللون الثالث؟ أنا أختبر هذا بدون أي تنسيق CSS آخر فقط لكي تعلم. كان يعرض اللون الذهبي قبل التحديث، لهذا السبب أفكر في ترتيب الطبقات (z-index) :man_shrugging:t3:

إعجاب واحد (1)

لقد تحققت من موقعك وتستخدم الإصدار السابق الذي لا يحتوي على إصلاح z-index. يرجى تحديث المكون إلى أحدث إصدار. :slightly_smiling_face:

شكراً لك دون، كل شيء على ما يرام الآن، ربما قمت بالتحديث بسرعة كبيرة :crazy_face:

اقتراح واحد؛ اجعل هناك خيار لإيقاف هذا تمامًا للأجهزة غير التي تعمل باللمس. الآن بعد أن جربت شريط التمرير، لست متأكدًا من أنني أحببته لأنه يزيل شريط التمرير الافتراضي ويجعل تجربة المستخدم غير متسقة.

إعجاب واحد (1)

@Don - أحببت هذا! أفضل (كما في مكون سمة الموضوع القابل للنقر) عند التحويم، أن يكون المؤشر هو مؤشر الفأرة في كل مكان داخل صف/عنصر…

.topic-list-item:hover,
.latest-topic-list-item:hover {
    cursor: pointer;
}
إعجابَين (2)

@Don - يبدو أن الإعداد الخاص بـ لون الخلفية لتأثير التحويم يسري فقط بعد النقر أو الضغط على الصف/العنصر، وليس عند التحويم التقليدي المسبق (كما في مكون سمة الموضوع القابل للنقر).

إعجاب واحد (1)

مرحباً ديفيد :wave:

هذه فكرة رائعة. لقد قمت بدمج تحديث يضيف إعدادًا لإيقاف الرسوم المتحركة (المكون) بشكل منفصل على الأجهزة التي تعمل باللمس أو الأجهزة غير التي تعمل باللمس.

الآن يمكنك تحديد الخيار none الذي سيقوم بإيقاف المكون تمامًا.

3 إعجابات

مرحباً @denvergeeks :waving_hand:

المكون يجعل قائمة المواضيع القابلة للنقر كاملة الصف فقط حتى الآن. لذلك، يعمل أحدث عنصر في قائمة المواضيع بشكل افتراضي الآن. هذا هو السبب في أن مؤشر الفأرة يظهر فقط على عنصر قائمة المواضيع في الأجهزة غير التي تعمل باللمس. :slightly_smiling_face:

يتعامل المكون مع الأجهزة غير التي تعمل باللمس والأجهزة التي تعمل باللمس بشكل منفصل. يتم تنشيط الخلفية عند التحويم، في الأجهزة غير التي تعمل باللمس، وفي الأجهزة التي تعمل باللمس بعد الضغط عليها. ولكن أعتقد أنه سيحتاج إلى بعض التحديث لأن التحويم لن يعمل، على سبيل المثال، على أجهزة الكمبيوتر المحمولة التي تعمل باللمس والتي قد تحتوي على مؤشر. أعتقد أنه يمكننا تنشيطه عالميًا في عرض سطح المكتب والمؤشر أيضًا. :thinking:


لقد قمت بدمج هذه التغييرات.

إعجاب واحد (1)

هل يمكنك توضيح ما تقصده بالاعتماد على “مُحمّل شريط تمرير” من فضلك. هل هذا سمة أخرى، أو إضافة، أو مكتبة JavaScript أو شيء آخر؟

3 إعجابات

الشريط المنزلق هو الرسوم المتحركة الجديدة لتحميل الصفحة. عند تحميل صفحة في Discourse، يوجد شريط تقدم أفقي أعلى الشاشة. هذا هو الشريط المنزلق.

تم تعيينه الآن كإعداد افتراضي ولكنه يمكن التراجع عنه إلى مؤشر التحميل الأصلي عبر إعداد مؤشر تحميل الصفحة.

4 إعجابات

مرحباً دون، ألا توجد طريقة ممكنة لجعل هذا يعمل مع محمل الدوران المسبق؟ أنا بصراحة أفضل محمل الدوران على محمل الشريط المنزلق لمنتداي.

مرحباً :waving_hand:
السبب في أنه يعمل مع المنزلق فقط هو أنه عندما تنقر على موضوع ما، يتم مسح محتوى الصفحة على الفور وتغييره إلى الدوار. لذلك لا يوجد وقت للقيام بالرسوم المتحركة. مع المنزلق، يبقينا على الصفحة الحالية أثناء تحميل الصفحة التالية، لذلك لدينا وقت لتشغيل الرسوم المتحركة. :slightly_smiling_face: