CSS Transition Transform：向一个方向滑动元素，并让它从相反的方向滑回

Question

我想将 span 的幻灯片设置为向左滑动的动画，而不是在过渡停止时立即移动到另一个位置而不进行过渡，然后再将其滑回原来的位置并进行过渡.我必须为动画使用 CSS，而不是 JS。

我的问题是一旦我将 span 动画化到左边，让它立即移动，我就无法转换回原位。

这是一个示例（单击范围以设置动画）：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');

        });

    });

});

Answer 1

我想这就是你想要完成的：

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

这会将元素向左滑动，隐藏它，一直向右移动它隐藏时（这是关键），显示它，然后将它滑回起始位置。

Answer 2

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);

}

CSS Transition Transform：向一个方向滑动元素，并让它从相反的方向滑回

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

javascript

css

transition

transform

jquery-animate