jquery css 转换翻译重置答案

【问题标题】：jquery css transform translate resetjquery css 转换翻译重置
【发布时间】：2017-02-28 14:49:15
【问题描述】：

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

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

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

所以每次点击按钮'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'

});

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

【问题讨论】：

标签： jquery css-transitions css-transforms

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

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

【讨论】：

有两个东西。 1）出于性能原因，我不能使用关键帧和 2）动画只发生一次，我需要动画重置并在每次单击按钮时再次发生。

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

});

【讨论】：