Question

我正在尝试使用JavaScript和jQuery按下按钮时重复CSS转换。设置图像的CSS：

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

然后在JS文件中的单击函数中，我正在尝试翻译“icon-image”位置，然后将其设置为动画回到2s中的原始位置。

所以每次按下按钮“icon1Image”都会上下移动507像素，然后动画回到原来的位置：

$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：anim 2s 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 */ });

});

jquery css transform翻译重置

2 个答案: