0

我想知道是否有可能使用一些 javascript 或 jquery 跳到下一个，或者转到 css 动画的最后一部分。假设我们有以下内容：

@keyframe effect{
    0%{opacity:1;}
    45%{opacity:1;}
    50%{opacity:0;}
    95%{opacity:0;}
    100%{opacity:1;}
}

这将使某些东西淡出然后重新出现

所以可以说我做了一些按钮。我将如何执行以下操作：

$('#next').click(function(){
    //skip to the next animation part
});
$('#previous').click(function(){
    //skip to the previous animation part
});
4

2 回答 2

1

除非您根据类将 CSS 分解为不同的部分，然后添加/删除类，否则这实际上是不可能的。

但是，有一个非常棒的 JavaScript 库，叫做Greensock，它允许基于时间轴的动画 - 在许多情况下比 CSS 动画更快。它还具有跨浏览器兼容的优点。

例如，如果您要使用 Greensock 创建类似的东西，它看起来像这样：

var effect = new TimelineMax({paused:true});

effect.addLabel('start');
effect.to(
  '#myItem',
  1,
  {css:{opacity:1}}
);
effect.addLabel('step1');
effect.to(
  '#myItem',
  1, 
  {css:{opacity:0}}
);
effect.addLabel('end');

effect.play();

$('#gotoEnd').on('click', function(e){
  e.preventDefault();
  effect.seek('end');
});
于 2013-10-15T03:44:52.773 回答
0

使用 animation-play-state 属性，您可以暂停动画并更新变换，然后重新启动它。

element.style.webkitAnimationPlayState = "paused";
element.style.webkitAnimationPlayState = "running";

但是，您不能暂停动画、变换动画、恢复动画并期望它从新的变换状态流畅地运行。

目前，无法获得 CSS 关键帧动画当前的“完成百分比”。近似它的最佳方法是使用 setInterval 或 requestAnimationFrame。

这篇CSS 技巧文章进一步解释了这一点，并给出了使用 setInterval 的示例。另一种选择是使用请求动画帧

如前所述，GreenSock 或 Velocity 是动画库，可实现极其快速和流畅的动画

于 2014-10-15T11:45:08.607 回答