CSS 过渡变换：单向滑动元素，然后从相反方向滑回答案

【问题标题】：CSS Transition Transform: Sliding element one way, and having it slide back in from the opposite directionCSS 过渡变换：单向滑动元素，然后从相反方向滑回
【发布时间】：2015-01-23 10:34:57
【问题描述】：

我想让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');

        });

    });

});

【问题讨论】：

" 我必须为动画使用 CSS，而不是 JS" 那么你为什么在问题中使用脚本标签？不仅如此，您应该在 CSS 中创建这些动画，然后应用/删除该类，而不是将其完全写入元素中。
对于动画：这是一个 CSS 过渡而不是 .animation()。 JS 标记，因为我必须使用 transitionend - CSS 中还没有这样的功能。
韩，现在我明白了。

标签： javascript css jquery-animate transform transition

【解决方案1】：

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

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

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

【讨论】：

很棒的无 js 解决方案。 @arber 请简要说明你做了什么
感谢@henry 的编辑，我在工作，所以想快点。
添加“-webkit-backface-visibility: hidden;”跨度将阻止 Chrome 中的 1px jit。

【解决方案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);

}

【讨论】：