javascript - 为什么 Web Animation API reverse() 会导致我的动画跳跃？-6ren

javascript - 为什么 Web Animation API reverse() 会导致我的动画跳跃？

转载作者：行者123 更新时间：2023-12-02 20:56:24

24

4

Docs everywhere假设在动画播放时调用 reverse() 与将 playbackRate 设置为 -1 相同，但是当 reverse() 时我的动画会疯狂跳跃> 被使用。 playbackRate 工作正常。我真的很想使用 reverse() 因为它与状态无关，但我担心我不理解它。

我在这里有一个关于codesandbox上旋转方 block 的小例子:

https://codesandbox.io/s/small-browser-1bkdt?file=/src/index.js

我做错了什么还是reverse()没那么简单？

更新:

这可能是 Codesandbox 的错误，因为 this fiddle @Kaiido 的作品很好。
我使用的是 Firefox 75.0 和 MacOS。 Chrome 似乎运行良好。

最佳答案

从this codesandbox issue可以清楚地看出，可以通过在 sandbox.config.json 中禁用“无限循环保护”来解决跳跃行为。在元素开始完美运行之前，我还必须 fork 该元素。这可能不是 Firefox 的问题。

关于javascript - 为什么 Web Animation API reverse() 会导致我的动画跳跃？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61472983/

24

4

0

文章推荐： oracle - DD/MM/YYYY HH 的日期转换 :MM:SS to YYYYMM

文章推荐： javascript - 编写正确的 Dockerfile

文章推荐： macos - 如何从USB外设读取数据？

Reverse an array without using Array.Reverse()(在不使用Array.Reverse()的情况下反转数组)
如何在不使用Array.Reverse()方法的情况下反转数组(在C#中)？。例如,。应该会导致。这是我的面试任务。
html - flex 流 :row-reverse wrap-reverse in reverse order html and css
我有一个内容，我希望它们以倒序排列和换行倒序排列，但顺序相反。这是代码: .a { height: 200px; width: 520px; padding: 5px 5px 5px 10
haskell - (reverse . f . reverse) 有效吗？
很多时候，我看到在列表头部运行的函数，例如: trimHead ('\n':xs) = xs trimHead xs = xs 然后我看到了定义: trimTail = reverse
haskell - 通知 Haskell `(Reverse (Reverse xs)) ~ xs`
如果 Reverse :: [k] -> [k]是一个类型族，那么 Haskell 无法判断 (Reverse (Reverse xs)) ~ xs .有没有办法让类型系统知道这一点而无需任何运行时成
.net - Array.Reverse() 与 Enumerable.Reverse()
我有一个单维项目数组，其声明和初始化为: string[] SubDirectorylist = Directory.GetDirectories(TargetDirectory); 我想反转成员并发
Python:为什么当 a 是数组时，reversed(a)==reversed(a) 返回 False？
这是代码 >>> a=[1,3,2] >>> a [1, 3, 2] >>> a= 3,1,2 >>> a (3, 1, 2) >>> sorted(a) [1, 2, 3] >>> sorted(a
java - Collections.reverse() 与 Lists.reverse() 哪个更快？
我对以下问题感兴趣:Collections.reverse() 与 Lists.reverse() 哪个更快？最佳答案他们做不同的事情。 Collections.reverse 采用可变列表并反转
java - Collections.reverse() vs Lists.reverse() 哪个更快？
我对以下问题感兴趣:Collections.reverse() 与 Lists.reverse() 哪个更快？最佳答案他们做不同的事情。 Collections.reverse 采用可变列表并反转
python/django list.reverse() 和 reversed(list)
我今天在我的 Django 控制台中尝试了这个，我得到了两个不同的结果。我认为 list.reverse() 会反转列表(即第一个对象变成最后一个，依此类推)[1]。然而，情况似乎并非如此。 >>>
javascript - jquery/javascript : jQuery. fn.reverse = [].reverse;
这个小小的 jQuery 插件: jQuery.fn.reverse = [].reverse; 它是如何工作的？对象绑定(bind)在哪里 - 反转函数的数组原型(prototype)？我真的不明白
python - mylist.reverse() 和 list.reverse(mylist) 是如何执行的？
大概都是 mylist.reverse()和 list.reverse(mylist)最终执行 reverse_slice 在 listobject.c通过 list_reverse_impl 或 P
python - django-reversion 和 django-reversion-compare 与用户模型
您好，我在添加 django-reversion 和 django-reversion-compare 模块时遇到了一些问题。我创建了新项目，我想使用 django-reversion 跟踪 use
python - django-python : failed using reverse : no reverse match
我有以下观点: def default_new (request): if request.method == "POST": post = EquipmentForm(req
c# - 为什么 IList<>.Reverse() 不像 List<>().Reverse 那样工作
我对 List.Reverse() 有疑问和 Reverse(this IEnumerable source) .查看代码: // Part 1 List list = new List {
python - 按第二个值对元组列表进行排序，reverse=True，然后按 key，reverse=False
我需要首先对字典进行排序，值 reverse=True，对于重复值，按键排序 reverse=False 到目前为止，我有这个 dict = [('B', 3), ('A', 2), ('A', 1)
python - 按 REVERSE VALUE 然后按 NON-REVERSE KEY 对字典进行排序
我有一个字典，其中包含要排序的字符串键和 int 值。我希望它首先按递减值编号排序，然后按字母顺序排序。例如，如果您有一个包含以下内容的字典: my_dict = {'zebra':1, 'the'
c# - 为什么是 Array.Reverse(myCharArray) 而不是 myCharArray=myCharArray.Reverse？
我是编程新手。我正在通过第 9 channel 的 Bob Tabors 视频学习 c#。你能解释一下为什么我们不能做这样的事情吗: string mijnVoornaam = "Remolino"
c# - IEnumerable.Reverse 和 List.Reverse 之间的区别
这个问题在这里已经有了答案: Why there is two completely different version of Reverse for List and IEnumerable? (
python reversed(list) 和 list.sort(reverse=True) 的区别
有什么区别 mylist = reversed(sorted(mylist)) 对 mylist = sorted(mylist, reverse=True) 为什么要使用一个而不是另一个？如何在多
javascript - Javascript 中的 Array.prototype.reverse 和 Array.reverse 有什么区别？
我的问题涉及将新方法添加到现有String 构造函数的应用程序。在 Stoyan Stefanov 的 Object Oriented Program for Javascript 中，有一个使用

首页

博学

6Ren·AI

商城

javascript - 为什么 Web Animation API reverse() 会导致我的动画跳跃？