אנימציות מדליקות באמצעות CSS3 - חלק ג

במדריכים קודמים למדנו את התחביר שמשמש אותנו להוסיף אנימציות לדף באמצעות CSS3. ובמדריך הנוכחי, נלמד מה לעשות כשרוצים להפוך את כיוון התנועה.

הקוד שאותו נפתח במדריך יאפשר לאלמנט להחליק לתוך הדף בעקבות לחיצה על הכפתור, ולהחליק החוצה בעקבות לחיצה נוספת על הכפתור.

אם אתה קורא את המדריך הזה, ואינך מכיר את הנושא של אנימציות אני ממליץ לך להתחיל מקריאת שני המדריכים הקודמים בסדרה:

• אנימציות מדליקות באמצעות CSS3 שמסביר כיצד להוסיף אנימציות פשוטות.
• אנימציות מדליקות באמצעות CSS3 - חלק ב שמסביר כיצד ליצור אנימציות מורכבות יותר באמצעות keyframes

דוגמה לשימוש היא אלמנט שמחליק פנימה מצידו של הדף, וכשסוגרים אותו הוא מבצע את התנועה ההפוכה, ומחליק החוצה עד שהוא חוזר להסתתר בצידו של הדף שממנו הוא צץ.

לחיצה ראשונה על הכפתור תגרום לאלמנט להחליק אל תוך הדף, ולחיצה שניה תגרום לאלמנט להחליק החוצה.

 

ה-html

ההטמ"ל כולל אלמנט div וכפתור:

<div class="elem"> </div>	
<button class="btn">לחץ לפתיחה</button>

 

קידוד התנועה של האלמנט אל תוך הדף

את כניסת האלמנט אל הדף נקודד לפי העקרונות שהסברנו במדריך קודם על אנימציות css3 באמצעות keyframes.

CSS
----

@keyframes magnificent_popup {
     from{left:-288px;}
     to  {left:0px;}
}

.elem {
    display:none;
    position:fixed;
    width:288px;
    height:560px;
    z-index:101;
    top: 92px;
    left:-288px;
    overflow:visible;
    animation-name: magnificent_popup;
    animation-duration: 0.8s;
    animation-timing-function: ease-in;
}
.elem.active {
    display:block;
    left:0;
}

האלמנט שאורכו 288 פיקסלים, מתחיל ממצב של העדר הצגה (כלל elem), כשהוא מוסתר בצידו של הדף על ידי ערך שלילי של left, ואנחנו מפעילים עליו את האנימציה magnificent_popup שגורמת לו להחליק מצידו השמאלי של הדף, עד שהוא מוצג במלוא אורכו (כלל elem.active).

נשתמש בפונקציה של jQuery ששמה drag שבתגובה ללחיצה על הכפתור מוסיפה או מורידה את הקלאס active. במידה והאלמנט במצב מוסתר (ערך שלילי של left) הפונקציה מוסיפה את הקלאס, אחרת היא מורידה אותו.

JS
----

var elem = $(".elem");
var btn   = $(".btn");

 function drag(elem){
        var r = parseInt(elem.css('left'));

        if(r < 0){
            elem.addClass('active');
        } else {
             elem.removeClass('active');
        }
};

btn.on("click",function(e){
        e.preventDefault();
        drag(elem);
});

הקריטריון שלנו להוספת הקלאס הוא הערך של left כדי למנוע את הפרעת התנועה של האלמנט. קודם האלמנט מסיים את התנועה פנימה או החוצה, ורק אז ניתן להורות לו לבצע את התנועה ההפוכה.

 

כיצד לבצע תנועה הפוכה ביציאה?

אז הבנו שצריך להוסיף ולהוריד את הקלאס active, אבל אם נשתמש בקוד כמו שפיתחנו אותו עד עכשיו, נגלה שביציאה האלמנט נעלם בפתאומיות במקום להחליק החוצה בצורה יפה. כדי לפתור את הבעיה נוסיף keyframe שנקרא לוreverse_magnificent_pop שעושה את התנועה שמחליקה את האלמנט אל מחוץ לדף. לצורך כך, בזמן היציאה, נוסיף על האלמנט קלאס זמני (active_out) שמקושר עם ה- keyframe הנוסף. כשהאלמנט יסיים את התנועה החוצה מהדף נוריד את הקלאס הזמני כדי לאפס את המצב, ולאפשר ללחיצה חוזרת על הכפתור לגרום להחלקת האלמנט אל תוך הדף.

CSS
----

@keyframes magnificent_popup {
     from{left:-288px;}
     to  {left:0px;}
}
@keyframes reverse_magnificent_popup {
     from{left:0;}
     to  {left:-288px;}
}

.elem {
    display:none;
    position:fixed;
    width:288px;
    height:560px;
    z-index:101;
     top: 92px;
    left:-288px;
    overflow:visible;
    
    animation-name: magnificent_popup;
    animation-duration: 0.8s;
    animation-timing-function: ease-in;
}
.elem.active {
    display:block;
    left:0;
}
.elem.active-out{
    animation-name: reverse_magnificent_popup;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
}

 

JS
----

(function($){
    var elem = $(".elem");
    var btn    = $(".btn");

    var drag = function(elem){
        var r = parseInt(elem.css('left'));

        if(r < 0){
            elem.addClass('active');
        } else {
            elem.addClass('active-out');
           btn.text("לחץ לסגירה");
            window.setTimeout(function(){
        	    elem.removeClass('active-out');
        	    elem.removeClass('active');
                btn.text("לחץ לסגירה");
        	}, 800)
        }
    };

    btn.on("click", function(e){
        e.preventDefault();
        drag(elem);
    });
}(jQuery));

חשוב שמשך התנועה יהיה מתואם בין האנימציה בקוד ה-css ובין קוד ה-javascript. בקוד שלנו, משך התנועה הוא 800 מילי-שניות.

למדריכים נוספים בסדרת ה-CSS3

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים