Jquery CSS转换翻译重置

Question

我试图在使用JavaScript和jQuery按下按钮时重复CSS过渡。图片的CSS设置:

.icon1-image {
position: absolute;
top: -105px;
left: 507px;
} 

然后在一个JS文件中的点击功能，我试图翻译' icon-image '的位置，然后让它动画回到原来的位置在2s。

每次点击按钮，icon1Image就会向下移动507px然后动画回到原来的位置

$icon1Image.css({
"-moz-transform":"translate(507px,507px)",
"-webkit-transform":"translate(507px,507px)",
"-ms-transform":"translate(507px,507px)",
"transform":"translate(507px,507px)",
"-moz-transition":'transform 0s ease-in',
"-webkit-transition":'transform 0s ease-in',
"-ms-transition":'transform 0s ease-in',
"transition":'transform 0s ease-in',
"-moz-transform":"translate(0px,0px)",
"-webkit-transform":"translate(0px,0px)",
"-ms-transform":"translate(0px,0px)",
"transform":"translate(0px,0px)",
"-moz-transition":'transform 2s ease-in',
"-webkit-transition":'transform 2s ease-in',
"-ms-transition":'transform 2s ease-in',
"transition":'transform 2s ease-in'
});​

使用这段代码，原始转换似乎被忽略了。实现这一目标的正确方法是什么?

Answer 1

检查这个提琴https://jsfiddle.net/owhqj9c3/1/

CSS

.animation{animation: anim2s ease-in;}

@keyframes anim {
  0% {
    transform:translate(507px,507px)
  }
  100% {
    transform:translate(0,0)
  }
}

JS

$(this).addClass("animation");

Answer 2

如果你不想使用css keyframes，你可以看看transitionend或jQuery .delay()。

transitionend是一个事件，当css过渡结束时触发。你可以这样使用它:

$button
.on('click', function(){
    $icon1Image
    .one('transitionend', function(){ // .one() triggers only once
        $(this).css({ /* reset css */ });
    })
    .css({ /* apply new css */ });
});

使用.delay():

$button
.on('click', function(){
    $icon1Image
    .css({ /* apply new css */ })
    .delay(2000) //wait 2 seconds
    .css({ /* reset css */ });
});