CODEWITHSUNDEEP
javascriptcssjquery-animatetransformtransition
ditto
ditto

Reputation: 6277

CSS Transition Transform: Sliding element one way, and having it slide back in from the opposite direction

I'm wanting to animate the slide of span to the left, than when transition stops, have it instantly move to another position without transition, and then afterwards slide it back into it's original position with transition. I must use CSS for the animation, not JS.

My problem is once I've animated the span to the left, and had it instantly go move, I cannot transition back into position.

Here's an example (click the span to animate): http://jsbin.com/tosaxedura/3/edit

body, html, div {
    display:block;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
div {
    background:black;
    display:block;
    height:200px;
    width:200px;
    margin:0 auto;
}
span {
    display:block;
    height:inherit;
    width:inherit;
    background:red;
    transition:transform 275ms cubic-bezier(0.470, 0.000, 0.745, 0.715), opacity 275ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
}

$('body').on('click', 'span', function () {

    var self = $(this);

    self.css('transform', 'translateX(-100%)').css('opacity', '0.5');

    self.one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function (e) {

        self.css({
            'transition-duration': '0',
                'transform': 'translateX(100%)'
        });



        // move back into original position (overlaying the black) with animation   
        self.one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function (e) {

            //self.css('transition-duration', '');
            //self.removeAttr('style');

        });

    });

});

Upvotes: 2

Views: 2794

Answers (2)

ditto
ditto

Reputation: 6277

http://jsbin.com/cihurigoba/3/edit

CSS:

body, html, div {
    display:block;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
body, html {
  -webkit-backface-visibility: hidden;
}

div {
    background:black;
    display:block;
    height:200px;
    width:200px;
    margin:0 auto;
}
span {
    display:block;
    height:inherit;
    width:inherit;
    background:red;

   transition: transform 200ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
}



.left.slideOut {
    transform: translateX(-100%);
  opacity:0.5;
}

.left.instant {
 transform: translateX(100%);
 transition: none;
}

.left.slideIn {
    opacity:1;
    transform: translateX(0);
}

.right.slideOut {
  transform: translateX(100%);
  opacity:0.5;
}

.right.instant {
 transform: translateX(-100%);
 transition: none;
}

.right.slideIn {
    opacity:1;
    transform: translateX(0);
}

HTML:

  <div class="container">
    <span class="left"></span>
  </div>

JS:

var clickspam = false;
$('body').on("click", "span", function () {

    if (!clickspam) {
        clickspam = true;
        shift($(this));
    }

});

function shift(self) {

    if (!clickspam) return false; clickspam = false;

    self.addClass('slideOut');  
    $('.slideOut').one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function (e) {

      self.removeClass('slideOut').addClass('instant');

      setTimeout(function () {

        self.removeClass('instant').addClass('slideIn');


          //self.removeClass('slideIn');


        }, 1);

    });


    // unlock clickspam
    setTimeout(function () {
        clickspam = false;
        $('span').removeClass('slideIn instant slideOut');

    }, 500);

}

Upvotes: 0

Arber Sylejmani
Arber Sylejmani

Reputation: 2108

I think this is what you were trying to accomplish:

http://jsbin.com/tayupizepe/1/watch?html,css,output

This slides the element to the left, hides it, moves it all the way to the right while hidden (that's the key), reveals it, and slides it back to the starting position.

Upvotes: 2

Related Questions