تأثيرات إبداعية لإضافة وإزالة عناصر قائمة باستخدام تحريكات CSS3

عند استخدام التحريكات animations والانتقالات transitions ضمن واجهة المستخدم، فإنّه من الضروري أن يكون لها هدف واضح ومحدّد، ألا وهو تحسين تجربة المستخدم.

تؤمّن لنا الانتقالات transitions الوسيلة المناسبة والمثالية لجعل الحركة سلسة وانسيابية أمام المستخدم. بدون تأثيرات الانتقال من الممكن أن يصبح المستخدم في حيرة من أمره حول الذي حدث بالضبط عند تنفيذه لأمر معين.

في هذا المقال، سننشئ بعض التحريكات والانتقالات الإبداعية لإضافة وإزالة عناصر من قائمة، لقد أعجبتني الفكرة الواردة في مقال باسكويل دي سيلفيا. أمّا بالنسبة للشيفرة المسؤولة عن الإنتقالات في مقال باسكويل، فقد كتبه كريس كوير.

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

سأستخدم خصائص CSS بدون أي بادئة prefix وذلك بغرض الاختصار، لكنك ستجد الخصائص كاملة ضمن النص المصدري للمشروع على Github. ستعمل مقاطع الشيفرة التي ستجدها ضمن هذا الدرس على متصفحات تدعم خصائص CSS المستخدمة.

لنبدأ العمل!

الرماز The Markup

لتوضيح فكرة الدرس بشكل جيد، أنشأت تطبيقاً بسيطاً خاصاً بالملاحظات البسيطة. يستخدم هذا التطبيق تقنية التخزين المحلي LocalStorage التي توفرها HTML5 وذلك لحفظ الملاحظات ضمن التخزين المحلي لمتصفح ويب لديك. يسمح لك التطبيق بأخذ ملاحظات وحفظها ضمن المتصفح إن أردت ذلك، في الحقيقة هو السبب الذي من أجله بنيت هذا التطبيق، وذلك من أجل ملاحظاتي الخاصة. لن أخوض في تفاصيل كيفية بناء هذا التطبيق لأنّ ذلك ليس هدف هذا الدرس.

الرُماز markup المستخدم في هذا التطبيق هو مجرد نموذج form بسيط يحتوي على حقل نصي text field وزر إرسال submit button، بالإضافة إلى قائمة غير مرتّبة unordered list. ستُضاف الملاحظات إلى هذه القائمة بشكل تلقائي. كما يوجد أيضاً عنصري div لعرض التنبيهات، التي ستظهر عند حفظ أو إزالة أي عنصر، بالإضافة إلى عدّاد وزر لحذف جميع العناصر بنقرة واحدة. فيما يلي جميع رُماز HTML الذي سنحتاجه:

<div class="notification undo-button">
  Item Deleted. Undo?
</div> 

<div class="notification save-notification">
  Item Saved
</div> 

<div class="reminder-container"> 
  <header> 
    <h1>mini reminders list</h1> 
  </header>
 
  <form id="input-form"> 
    <input type="text" id="text" placeholder="Remind me to.."/> 
    <input type="submit" value="Add" /> 
  </form> 

  <ul class="reminders"> 
  </ul> 

  <footer> 
    <span class="count"></span> 
    <button class="clear-all">
       Delete All
    </button> 
  </footer> 
</div>

يمكنك إضافة وتحرير وإزالة العناصر (الملاحظات) بالإضافة إلى إمكانية إستعادة العنصر المحذوف. في الواقع، تأتي أغلب التحريكات مرافقة لعملية إزالة وإستعادة العناصر. تُعتبر عملية إضافة العناصر بسيطة ولا تترافق مع الكثير من التحريكات، باستثناء التحريك الخاص بالظهور التدريجي fade in والسقوط إلى أسفل falling down واللذان سنتحدث عنهما عندما نبدأ العمل مع CSS.

تنسيقات CSS

ستحصل العناصر المُضافة توّاً عن طريق JavaScript على الصنف new-item. (صنف CSS). أمّا العناصر المُزالة فستحصل على الصنف removed-item. كما ستحصل العناصر المُستعادة على الصنف restored-item. وكل صنف من الأصناف السابقة سيُفعّل التحريكات الخاصة به. ستبقى أسماء الأصناف السابقة ثابتةً لجميع الأمثلة التوضيحية، في حين ستختلف فيما بينها بالتوجيه المسؤول عن مظهر التحريك keyframes@. لنبدأ الآن بالمثال التوضيحي الأول.

المثال الأول

المثال الأول: العناصر المُزالة "تسقط إلى أسفل"، والعناصر المُستعادة ستعود بحركة معاكسة.

ستسقط العناصر المضافة حديثاً من الأعلى، وهذا تأثير بسيط لكنه جميل. سيبدأ كل عنصر مُضاف حديثاً بالسقوط إلى أسفل وذلك من موقع يعلو 400 بيكسل عن الموقع النهائي الذي سيستقر فيه (أي الموقع النهائي ناقص 400 بيكسل) لا تنس أنّه يجب على الخاصية الفرعية animation-fill-mode أن تحمل القيمة forwards وذلك للتأكّد من أنّ العناصر ستبقى في موقعها النهائي ضمن القائمة، وإلّا فإنّها ستختفي بمجرّد انتهاء عملية التحريك.

li.new-item { 
  opacity: 0; 
  animation: new-item-animation .3s linear forwards; 
} 

@keyframes new-item-animation {   
  from { opacity: 0; transform: translateY(-400px); } to { opacity: 1; transform : translateY(0); } 
}

ستسقط العناصر المزالة وتتلاشى fade out. بالنسبة لتحريكة السقوط إلى أسفل فهي بسيطة جداً، حيث ينتقل العنصر إلى أسفل وفق محور التراتيب (محور y) ليحاكي تحريكة السقوط، ويدور بينما يسقط ويتلاشى بالتدريج حتى يختفي تماماً (ستتحقّق شيفرة JavaScript من أنّ العنصر قد أُزيل كليّاً من DOM في نهاية هذه التحريكة).

li.removed-item { 
  animation: removed-item-animation 1s cubic-bezier(0.55, -0.04, 0.91, 0.94) forwards; 
  transform-origin: 0% 100%; 
} 

@keyframes removed-item-animation { 
  0% { opacity: 1; transform: rotateZ(0); } 
  100% { opacity: 0; transform: translateY(600px) rotateZ(90deg); } 
}

أمّا عندما نستعيد عنصرًا فستعمل تحريكة الاستعادة على عكس المنطق الموجود في تحريكة إزالة عنصر، لذلك فستكون الأُطر الأساسية keyframes مُعرّفة بشكل معاكس تماماً لما هو عليه في تحريكة إزالة عنصر:

li.restored-item { 
  animation: openspace 0.3s ease forwards, 
             restored-item-animation 0.3s 0.3s cubic-bezier(0, 0.8, 0.32, 1.07) forwards; 
} 

@keyframes openspace { to { height: auto; } } 
@keyframes restored-item-animation { 
  0% { opacity: 0; transform: translateY(600px) rotateZ(90deg); } 
  10% { opacity: 1; transform: translateY(600px) rotateZ(90deg); } 
  100% { opacity: 1; transform: rotateZ(0); } 
}

يمكنك أن ترى أننا نستخدم في الشيفرة السابقة مظهر تحريك اسمه openspace استعرته من مقال كريس كوير. يتأكّد مظهر التحريك هذا من أنّ العناصر التي تقع أسفل العنصر المُسترجع (إن وجدت)، ستنزلق إلى الأسفل وتفسح مجالاً للعنصر المُسترجَع ليعود إلى مكانه. إذاً عندما تنزلق العناصر إلى الأسفل لتفسح مجالاً open space للعنصر المُسترجَع، فإنّها فعلياً يجب أن تنتقل إلى الأسفل بشكل سلس، ولكن بما أنّ العناصر في هذا التطبيق لا تملك ارتفاعاً height ثابتاً، لذلك فإنّ إطار التحريك الأساسي to (انظر الشيفرة في الأعلى) سيجعل قيمة الارتفاع height لها لتصبح auto في نهاية عملية التحريك، سيؤدي ذلك لسوء الحظ إلى أنّ العناصر لن تنزلق إلى الأسفل، بل ستبدو كما لو أنّها تقفز إلى الأسفل.

على أية حال توجد طريقة تجعل العناصر تغير مواقعها بشكل سلس، وهي تقنية كتب عنها ستيف ساندرسون Steve Sanderson هنا. لكنه يستخدم لهذا الغرض التموضع المطلق absolute positioning، وكمية لا بأس بها من شيفرة JavaScript. يمكنك تفقّد مقالته إذا كنت مهتماً بمعرفة المزيد عن التقنيّة التي يستخدمها، والتي تعطي في الحقيقة نتائج رائعة!

المثال الثاني

المثال الثاني: العناصر تكبُر وتتلاشى أمام المستخدم، وتُستَعاد بطريقة معكوسة.

يعود الفضل في هذه الفكرة إلى تيم بيتروسكي Tim Pietrusky، حيث جاء بها عندما أخبرته أنّ الأفكار قد نفذت منّي بعد أن وضعت خمسة أمثلة توضيحية!

في هذه الفكرة، تظهر العناصر المُضافة حديثاً (أي تلك العناصر التي لم تُزال من قبل ثم استُعيدت) بشكل تدريجي fade in ضمن موقعها.

li.new-item { 
  opacity: 0; 
  animation: fadeIn .3s linear forwards; 
} 

@keyframes fadeIn { to { opacity: 1; } }

عندما تُزال العناصر، فإنّها تكبُر وتتلاشى أمام المستخدم، أمّا العناصر المُستعادة فتسلك الأسلوب المعاكس، فعملية التحريك بالنسبة للعناصر المستعادة تماثل تماماً عملية التحريك بالنسبة للعناصر المزالة ولكن بالمقلوب.

li.removed-item { 
  animation: removed-item-animation .6s ease-out forwards; 
  transform-origin: 50% 50%; 
} 

@keyframes removed-item-animation { 
  0% { opacity: 1; transform: scale(1); } 
  100% { opacity: 0; transform: scale(4); } 
} 

li.restored-item { 
  animation: openspace .3s ease forwards, 
             restored-item-animation .3s .3s ease-out forwards; 
} 

@keyframes openspace { to { height: auto; } } 
@keyframes restored-item-animation { 
  0% { opacity: 0; transform: scale(4); } 
  100% { opacity: 1; transform: scale(1); } 
}

المثال الثالث

المثال الثالث: ستنزلق العناصر المستعادة لتدخل من اليمين، أما العناصر المزالة فستنزلق يساراً إلى الخارج.

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

بالنسبة للعناصر المُزالة فإنها ستنزلق يساراً إلى الخارج، مع ملاحظة تأثير جميل يحدث عند بدء عملية الإزالة باستخدام دالة توقيت من النوع Cubic Bezier، انظر إلى المثال التطبيقي لترى كيف تعمل هذه التحريكة.

li.removed-item { 
  animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29); 
} 

@keyframes removed-item-animation { 
  0% { opacity: 1; transform: translateX(0); } 
  30% { opacity: 1; transform: translateX(50px); } 
  80% { opacity: 1; transform: translateX(-800px); } 
  100% { opacity: 0; transform: translateX(-800px); } 
}

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

li.restored-item { 
  animation: openspace .3s ease forwards, 
             restored-item-animation .5s .3s cubic-bezier(.14,.25,.52,1.56) forwards; 
}  

@keyframes openspace { to { height: auto; } } 
@keyframes restored-item-animation { 
  0% { opacity: 0; transform: translateX(300px); } 
  70% { opacity: 1; transform: translateX(-50px); } 
  100% { opacity: 1; transform: translateX(0); } 
}

المثال الرابع

المثال الرابع: ستكبر العناصر المستعادة والجديدة وتظهر تدريجياً ضمن موقعها، أمّا العناصر المزالة فإنّها ستصغر وتختفي تدريجياً.

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

li.removed-item { 
  animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards; 
} 

@keyframes removed-item-animation { 
  from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0); } 
} 

li.restored-item { 
  animation: openspace .3s ease forwards, 
             restored-item-animation .3s .3s cubic-bezier(0,.8,.32,1.07) forwards; 
} 

@keyframes openspace { to { height: auto; } } 
@keyframes restored-item-animation { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

المثال الخامس

المثال الخامس: تسقط العناصر الجديدة من الأعلى إلى الأسفل. العناصر المزالة تبقى معلّقة قليلاً ثم تسقط إلى الأسفل. أما العناصر المستعادة فتنزلق إلى الداخل من اليمين.

في هذا المثال، عندما نُزيل أحد العناصر فإنّه يبقى معلّقاً قليلاً قبل أن يبدأ بالسقوط الفعلي ثم الإختفاء. في الحقيقة هذا هو الجزء الأهم في هذا المثال، لأنّ العناصر الجديدة ستسقط إلى الأسفل كما في المثال الأوّل، والعناصر المستعادة ستنزلق إلى الداخل من اليمين كما في المثال الثالث، ولكن مع فرق طفيف في دالة التوقيت timing function. لذلك فإنّ التحريكة الخاصة بإزالة العناصر هي التأثير الجديد الوحيد في هذا المثال.

li.restored-item { 
  transform: translateX(300px); 
  animation: openspace .3s ease forwards, 
             restored-item-animation .3s .3s cubic-bezier(0,.8,.32,1.07) forwards; 
} 

@keyframes openspace { to { height: auto; } } 
@keyframes restored-item-animation { to { opacity: 1; transform: translateX(0); } } 

li.removed-item { 
  animation: removed-item-animation 2s cubic-bezier(.55,-0.04,.91,.94) forwards; 
  transform-origin: 0% 100%; 
}

يعطي تغيير زاوية الدوران للعنصر ضمن أُطر frames مختلفة (الأطر الرئيسية: 0% و 20% و 40% و 60% و 70% و 90% و 100%) انطباعاً بأنّ العنصر يتأرجح بينما يكون معلّقاً، وبعد ذلك يبدأ بالسقوط إلى الأسفل.

@keyframes removed-item-animation { 
  0% { opacity: 1; transform: rotateZ(0); } 
  20% { opacity: 1; transform: rotateZ(140deg); } 
  40% { opacity: 1; transform: rotateZ(60deg); } 
  60% { opacity: 1; transform: rotateZ(110deg); } 
  70% { opacity: 1; transform: rotateZ(90deg) translateX(0); } 
  90% { opacity: 1; transform: rotateZ(90deg) translateX(600px); } 
  100% { opacity: 0; transform: rotateZ(90deg) translateX(600px); } 
}

المثال السادس

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

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

li.restored-item { 
  transform: translateX(300px); 
  animation: openspace .3s ease forwards, 
             restored-item-animation .5s .3s cubic-bezier(.14,.25,.52,1.56) forwards; 
} 

@keyframes openspace { to { height: auto; } } 
@keyframes restored-item-animation { 
  0% { opacity: 0; transform: translateX(300px); } 
  70% { opacity: 1; transform: translateX(-50px); } 
  100% { opacity: 1; transform: translateX(0); } 
}

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

من المهم الآن أن نعمل على إعداد تحويل مناسب لموضع نقطة الأصل origin (مبدأ الإحداثيات)، بحيث أنّ التأثير المسؤول عن السقوط إلى أسفل يبدو أكثر واقعية. بغية ذلك، أجريت تحويلاً على نقطة الأصل لكي تنطبق على آخر نقطة تماس بين العنصر والسطر الذي ينتمي إليه، وذلك قبل أن يبدأ بالدوران والسقوط إلى أسفل، يعطي ذلك انطباعاً بأنّ العنصر يسقط بسبب وزنه.

li.removed-item { 
  animation: removed-item-animation 1s linear; 
  transform-origin: 390px 100%; 
} 

@keyframes removed-item-animation { 
  0% { opacity: 1; transform: translateX(0) rotateZ(0); } 
  50% { opacity: 1; transform: translateX(-400px) rotateZ(0); } 
  75% { opacity: 1; transform: translateX(-420px) rotateZ(-30deg); } 
  100% { opacity: 0; transform: translateX(-800px) rotateZ(-60deg) translateY(400px); } 
}

خاتمة

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

لم أدخل في القسم المتعلّق بـ JavaScript لأنّ ذلك ليس من محور اهتمام الدرس.

من الملاحظ وجود خطأ ضمن متصفح Firefox (ربما يُصحّح في النسخ اللاحقة) ,والذي يسبب وميضاً للصفحة كلّما تمّ وضع التركيز على العنصر أو حتى إزالة التركيز عنه (أي عندما تضغط زر edit/save). لا أدري إذا كانت توجد طريقة لتجاوز هذا الأمر، لذلك فمن فضلك أعلمني إذا استطعت تحديد سبب ذلك الوميض وإذا كانت هناك أي طريقة لمنعه. على أية حال جُرّبت الأمثلة السابقة بشكل جيّد على المتصفحات التي تدعم Webkit.

شكراً لقراءتك هذا الدرس، وأرجو أن تكون قد استمتعت فيه.

بإمكانك الاطّلاع على هذه الأمثلة من هنا، أما الشيفرة المصدرية فهي متُوفّرة على هذا المُستودع.

ترجمة -وبتصرّف- للمقال Creative Add/Remove Effects For List Items with CSS3 Animations لصاحبته Sara Soueidan.