Question

这是我的实际代码

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

（我不知道为什么'左'没有在jfiddle上工作）基本上我有一个带5张卡的容器。当用户滑动卡片（已经实现）时，会触发animate（）并且卡片向右滑动然后消失。如何在CSS动画中实现这样的东西，而不是使用Jquery？我已经读过CSS动画运行得更快（我在我的移动设备上证明了它，hide（）运行速度很慢）...任何帮助或建议都将受到赞赏

Answer 1

您的左侧没有用，因为您需要将position设置为static以外的值（默认值）才能生效。
至于使用CSS，你可以在jQuery中添加一个类而不是动画。该类可以根据您的要求更改您可以在css中设置的转换。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

首先，创建一个可以通过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才能进行定位（即{{{ 1}} property）工作。

注意转换需要初始值也很重要。我添加了left来执行此操作。否则，（通过CSS转换）它只会跳转到2000px，因为没有起点。

此外，由于2000px作为left: 0值非常大，我建议您将父元素滚动更改为left，以便无关的滚动条不会出现

如何使用css3动画制作这个Jquery animate（）？

2 个答案: