![\"getAnimations\"](\"https:\/\/zhuxinyong.com\/wp-content\/uploads\/2024\/05\/getAnimations-scaled.jpeg\")
<\/p>\n<\/p>\n
\u4ee5\u4e0b\u662f\u4e00\u4e9b\u793a\u4f8b\u4ee3\u7801\uff0c\u5c55\u793a\u5982\u4f55\u4f7f\u7528 \u5047\u8bbe\u6709\u4e00\u4e2a HTML \u5143\u7d20\u6b63\u5728\u5e94\u7528 CSS \u52a8\u753b\u6216\u901a\u8fc7 Web \u52a8\u753b API \u52a8\u753b\uff1a<\/p>\n \u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff1a<\/p>\n \u4f60\u8fd8\u53ef\u4ee5\u4f7f\u7528 \u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff1a<\/p>\n Element.getAnimations() \u662f\u4e00\u79cd\u7528\u4e8e\u83b7\u53d6\u4e0e\u5143\u7d20\u5173\u8054\u7684\u6240\u6709\u52a8\u753b\uff08\u5305\u62ec CSS \u52a8...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,20,3],"tags":[5],"class_list":["post-2044","post","type-post","status-publish","format-standard","hentry","category-all","category-frontend","category-tech","tag-css"],"_links":{"self":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/2044","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2044"}],"version-history":[{"count":1,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/2044\/revisions"}],"predecessor-version":[{"id":2045,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/2044\/revisions\/2045"}],"wp:attachment":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Element.getAnimations()<\/code> \u662f\u4e00\u79cd\u7528\u4e8e\u83b7\u53d6\u4e0e\u5143\u7d20\u5173\u8054\u7684\u6240\u6709\u52a8\u753b\uff08\u5305\u62ec CSS \u52a8\u753b\u548c Web \u52a8\u753b API \u52a8\u753b\uff09\u7684\u65b9\u6cd5\u3002\u5b83\u8fd4\u56de\u4e00\u4e2a\u5305\u542b Animation<\/code> \u5bf9\u8c61\u7684\u6570\u7ec4\u3002\u8fd9\u4e9b Animation<\/code> \u5bf9\u8c61\u8868\u793a\u5143\u7d20\u5f53\u524d\u6b63\u5728\u8fd0\u884c\u6216\u6302\u8d77\u7684\u52a8\u753b\u3002<\/p>\n<\/span><\/a>\u8bed\u6cd5<\/h3>\n
let animations = element.getAnimations();\n<\/code><\/pre>\n<\/span><\/a>\u8fd4\u56de\u503c<\/h3>\n
\n
Animation<\/code> \u5bf9\u8c61\u7684\u6570\u7ec4\u3002<\/li>\n<\/ul>\n<\/span><\/a>\u4f7f\u7528\u6848\u4f8b<\/h3>\n
Element.getAnimations()<\/code> \u65b9\u6cd5\u6765\u83b7\u53d6\u548c\u64cd\u4f5c\u5143\u7d20\u7684\u52a8\u753b\u3002<\/p>\n<\/span><\/a>\u793a\u4f8b 1\uff1a\u83b7\u53d6\u5e76\u6682\u505c\u6240\u6709\u52a8\u753b<\/h4>\n
<!DOCTYPE html>\n<html>\n<head>\n <style>\n @keyframes slide {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100px);\n }\n }\n .animated {\n animation: slide 2s infinite;\n }\n <\/style>\n<\/head>\n<body>\n <div class="animated">This is a sliding div.<\/div>\n <button id="pause">Pause Animations<\/button>\n <button id="play">Play Animations<\/button>\n\n <script>\n const animatedElement = document.querySelector('.animated');\n const pauseButton = document.getElementById('pause');\n const playButton = document.getElementById('play');\n\n pauseButton.addEventListener('click', () => {\n const animations = animatedElement.getAnimations();\n animations.forEach(animation => {\n animation.pause();\n });\n });\n\n playButton.addEventListener('click', () => {\n const animations = animatedElement.getAnimations();\n animations.forEach(animation => {\n animation.play();\n });\n });\n <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n
slide<\/code> \u5e76\u5c06\u5176\u5e94\u7528\u4e8e\u4e00\u4e2a\u5e26\u6709 animated<\/code> \u7c7b\u7684 div<\/code> \u5143\u7d20\u3002<\/li>\nElement.getAnimations()<\/code> \u83b7\u53d6\u4e0e\u8be5\u5143\u7d20\u5173\u8054\u7684\u6240\u6709\u52a8\u753b\u3002<\/li>\n<\/span><\/a>\u793a\u4f8b 2\uff1a\u6539\u53d8\u52a8\u753b\u64ad\u653e\u901f\u5ea6<\/h4>\n
Element.getAnimations()<\/code> \u6765\u6539\u53d8\u52a8\u753b\u7684\u64ad\u653e\u901f\u5ea6\uff1a<\/p>\n<!DOCTYPE html>\n<html>\n<head>\n <style>\n @keyframes slide {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100px);\n }\n }\n .animated {\n animation: slide 2s infinite;\n }\n <\/style>\n<\/head>\n<body>\n <div class="animated">This is a sliding div.<\/div>\n <button id="speed-up">Speed Up Animations<\/button>\n <button id="slow-down">Slow Down Animations<\/button>\n\n <script>\n const animatedElement = document.querySelector('.animated');\n const speedUpButton = document.getElementById('speed-up');\n const slowDownButton = document.getElementById('slow-down');\n\n speedUpButton.addEventListener('click', () => {\n const animations = animatedElement.getAnimations();\n animations.forEach(animation => {\n animation.playbackRate *= 2;\n });\n });\n\n slowDownButton.addEventListener('click', () => {\n const animations = animatedElement.getAnimations();\n animations.forEach(animation => {\n animation.playbackRate \/= 2;\n });\n });\n <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n
Element.getAnimations()<\/code> \u83b7\u53d6\u4e0e\u8be5\u5143\u7d20\u5173\u8054\u7684\u6240\u6709\u52a8\u753b\u3002<\/li>\nElement.getAnimations()<\/code> \u662f\u4e00\u4e2a\u5f3a\u5927\u7684\u5de5\u5177\uff0c\u7528\u4e8e\u63a7\u5236\u548c\u7ba1\u7406\u4e0e\u5143\u7d20\u5173\u8054\u7684\u6240\u6709\u52a8\u753b\uff0c\u901a\u8fc7\u8fd9\u79cd\u65b9\u5f0f\uff0c\u4f60\u53ef\u4ee5\u52a8\u6001\u5730\u63a7\u5236\u52a8\u753b\u7684\u884c\u4e3a\u548c\u5c5e\u6027\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"