如何使用 css3 动画制作这个 Jquery animate()？答案

【问题标题】：How can I make this Jquery animate() with css3 animations?如何使用 css3 动画制作这个 Jquery animate()？
【发布时间】：2016-07-14 21:42:15
【问题描述】：

This is my jfiddle

这是我的实际代码

$card.animate({
            left: "1000px"
        }, 500, function(){
            $card.hide(500);
        });

（我不知道为什么 'left' 在 jfiddle 上不起作用）基本上我在那里有一个装有 5 个 $cards 的容器。当用户刷卡（已经实现）时，会触发 animate() 并且卡片向右滑动然后消失。我怎样才能在 CSS 动画中实现这样的事情而不是使用 Jquery？我读过 CSS 动画运行得更快（我在移动设备上证明了这一点， hide() 运行得非常慢）...任何帮助或建议将不胜感激

【问题讨论】：

欢迎来到 SO，@SebastianAmpueroMorisaki！如果以下答案之一对您有帮助，请确保通过接受它向社区表明它解决了您的问题（单击答案旁边的绿色复选标记）。谢谢！

标签： javascript jquery css animation

【解决方案1】：

首先，创建一个可以通过 jQuery 触发的具有动画的类。

然后，使用您有两个选项：transition 或 animation。过渡更简单、更直接，但你可以用动画做更多的事情。

以下是我的建议：运动的过渡，以及重新创建hide() 函数的动画。

@keyframes hide {
    99% { display: auto; }
    100%{ display: none; opacity: 0; }
}
.myelement {
    transition: all .5s;
    position: absolute;
    left: 0;
}
.myelement.toLeft {
    left: 2000px;
    animation: hide .5s 1 forwards;
}

要触发它，只需这样做：

$(".myelement").addClass("toLeft");

Here is a working JSFiddle.

就像@MohitBhardwaj 所说，您必须将position 设置为absolute、relative 或static 才能使定位（即left 属性）起作用。

同样重要的是要注意转换需要一个初始值。我添加了left: 0 来做到这一点。否则，（使用 CSS 过渡）它会简单地跳转到 2000 像素，因为没有起点。

另外，因为left的值2000px很大，建议你把父元素的滚动改为overflow: hidden，这样就不会出现多余的滚动条了。

【讨论】：

【解决方案2】：

您的左侧不起作用，因为您需要将 position 设置为 static（默认值）以外的值才能使其起作用。
至于使用 CSS，您可以添加一个类来代替 jQuery 中的动画。此类可以根据您的要求更改您可以在 css 中设置的过渡。

var my_div = $('.myelement');

my_div.on('click', function() {
  var $this = $(this);
  $this.addClass("gone");
  setTimeout(function(){
    $this.hide();
  }, 600 );
})

#mywrapper
{
  overflow: hidden;
}
.myelement {
  height: 200px;
  width: 200px;
  background-color: red;
  opacity: 1;
  position: relative;
  transition: all 0.5s ease;
  opacity: 1;
  left: 0px;
}

.myelement.gone
{
  left: 500px;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mywrapper">
<div class="myelement">
  Click me please
</div>
</div>

【讨论】：