英文:
Pausing css animation on visibilitychange
问题
目标是在用户导航到其他标签页时冻结CSS动画，以便在用户返回时，动画处于与其离开时相同的状态。在可见性更改时设置animationPlayState不起作用，因为动画进度仍在继续，只有在页面再次可见时动画才停止。是否有一种方法可以在不使用不直观的方法或在JavaScript中进行所有动画的情况下实现这一点？
<!DOCTYPE html>
<html>
<head>
<style>
.progress-container {
width: 100%;
height: 30px;
background-color: #f3f3f3;
}
.progress-bar {
height: 100%;
width: 0;
background-color: #4CAF50;
animation: progress 30s linear;
}
@keyframes progress {
from { width: 0; }
to { width: 100%; }
}
</style>
</head>
<body>
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<script>
document.addEventListener('visibilitychange', function() {
let progressBar = document.getElementById('progressBar');
if (document.hidden) {
progressBar.style.animationPlayState = 'paused';
}
});
window.onload = function() {
let progressBar = document.getElementById('progressBar');
progressBar.style.animationPlayState = 'running';
};
</script>
</body>
</html>
英文:
the goal is to freeze css animation when user navigates to other tab, so when he navigates back, animation is at the same state as when he left. Setting animationPlayState when visibility changes doesn't work, as the animation progress still continues and animation stops only when page is visible again. Is there a way to do this without using unintuitive hacks or animating everything in js?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<style>
.progress-container {
width: 100%;
height: 30px;
background-color: #f3f3f3;
}
.progress-bar {
height: 100%;
width: 0;
background-color: #4CAF50;
animation: progress 30s linear;
}
@keyframes progress {
from { width: 0; }
to { width: 100%; }
}
</style>
</head>
<body>
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<script>
document.addEventListener('visibilitychange', function() {
let progressBar = document.getElementById('progressBar');
if (document.hidden) {
progressBar.style.animationPlayState = 'paused';
}
});
window.onload = function() {
let progressBar = document.getElementById('progressBar');
progressBar.style.animationPlayState = 'running';
};
</script>
</body>
</html>
<!-- end snippet -->
答案1
得分: 1
以下是已翻译的内容：
一种方法如下，代码中包含解释性注释：
<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-js -->
// 简单的实用函数，以减少编写和努力；
// 缓存文档：
const D = document,
// 实际上是 document.createElement() 的别名，允许我们创建元素并分配属性：
create = (tag, props) => Object.assign(D.createElement(tag), props),
// document.querySelector() / element.querySelector() 的别名（'context' 变量可以是 document（默认）或元素：
get = (selector, context = D) => context.querySelector(selector),
// 仅用于演示的目的，检索用于日志记录的 <ol> 元素：
log = get('.log'),
// 检索 .progress-bar 元素：
progressBar = get('.progress-bar');
// 使用 EventTarget.addEventListener() 将匿名箭头函数绑定为 'visibilitychange' 事件的事件处理程序：
D.addEventListener('visibilitychange', () => {
// 使用三元运算符设置进度条的 animationPlayState，如果当前可见性（事件后）为隐藏，则返回 "paused"，否则返回 "running"：
progressBar.style.animationPlayState = document.visibilityState === 'hidden' ? 'paused' : 'running';
// 这仅用于演示，不是必需的；在这里，我们创建一个 <li> 元素，并传递 textContent 属性，以记录当前可见性状态和当前宽度（使用 window.getComputedStyle() 检索）；创建的 <li> 被传递给 Element.append()，该方法将该 <li> 添加到 'log' 元素中：
log.append(create('li', {
textContent: `${document.visibilityState}, at width: ${window.getComputedStyle(progressBar,null).width}`
}));
});
<!-- 语言：lang-css -->
.progress-container {
width: 100%;
height: 30px;
background-color: #f3f3f3;
}
.progress-bar {
height: 100%;
width: 0;
background-color: #4CAF50;
animation: progress 30s linear;
}
@keyframes progress {
from {
width: 0;
}
to {
width: 100%;
}
}
<!-- 语言：lang-html -->
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<!-- 这只是为了说明演示，不在生产中需要： -->
<ol class="log">
</ol>
<!-- 结束代码片段 -->
参考文献：
- 箭头函数
document.createElement()document.querySelector()document.visibilityStateElement.append()Element.querySelector()EventTarget.addEventListener()Object.assign()- 模板字面量
visibilitychange事件。
英文:
One approach is below, with explanatory comments in the code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// simple utility functions, to minimise writing/effort;
// caching the document:
const D = document,
// effectively an alias for document.creatElement(), that allos us
// to create the element and assign properties:
create = (tag, props) => Object.assign(D.createElement(tag), props),
// alias for document.querySelector()/element.querySelector() (the
// 'context' variable can be either document (default), or an element:
get = (selector, context = D) => context.querySelector(selector),
// this is just for the demo, and retrieves the <ol> element for logging:
log = get('.log'),
// retrieves the .progress-bar element:
progressBar = get('.progress-bar');
// using EventTarget.addEventListener() to bind the anonymous Arrow function
// as the event-handler for the 'visibilitychange' event:
D.addEventListener('visibilitychange', () => {
// setting the progress-bar's animationPlayState, using a ternary operator,
// if the current visibility (after the event) is hidden, we return "paused",
// otherwise we return "runnning":
progressBar.style.animationPlayState = document.visibilityState === 'hidden' ? 'paused' : 'running';
// this is purely for the demo, and not otherwise required; here we
// create an <li> element, and pass in the textContent property, to
// log the current visibilityState, and the current width (retrieved
// with window.getComputedStyle()); the created <li> is passed to
// Element.append(), which appends that <li> to the 'log' element:
log.append(create('li', {
textContent: `${document.visibilityState}, at width: ${window.getComputedStyle(progressBar,null).width}`
}));
});
<!-- language: lang-css -->
.progress-container {
width: 100%;
height: 30px;
background-color: #f3f3f3;
}
.progress-bar {
height: 100%;
width: 0;
background-color: #4CAF50;
animation: progress 30s linear;
}
@keyframes progress {
from {
width: 0;
}
to {
width: 100%;
}
}
<!-- language: lang-html -->
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<!-- this is just to illustrate the demo, and not required in production: -->
<ol class="log">
</ol>
<!-- end snippet -->
References:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论