Issue with "CSS Animations tips and tricks": (When I tested the first requestAnimationFrame callback, the style was actually computed) #18869
Labels
Content:CSS
Cascading Style Sheets docs
help wanted
If you know something about this topic, we would love your help!
Comments
<html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
.start::after {
content: "hello dj";
animation-name: roll;
animation-duration: 1s;
animation-iteration-count: 1;
display: block;
}
.foo {
border: 1px solid blue;
width: 300px;
height: 100px;
}
@keyframes roll {
0% {
transform: translateX(0);
font-size: 10px;
}
100% {
transform: translateX(200px);
font-size: 30px;
}
}
@keyframes roll1 {
0% {
color: #fff;
}
100% {
color: red;
}
}
li {
opacity: 0;
}
li.active {
transition: opacity 3s;
opacity: 1;
}
</style>
</head>
<body>
<div class="foo"></div>
<div id="output"></div>
<script>
const foo = document.querySelector(".foo");
function listener(e) {
var l = document.createElement("li");
switch (e.type) {
case "animationstart":
l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
break;
case "animationend":
l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
foo.className = "foo";
break;
case "animationiteration":
l.innerHTML = "New loop started at time " + e.elapsedTime;
break;
}
document.getElementById("output").appendChild(l);
requestAnimationFrame(() => {
requestAnimationFrame(() => (l.className = "active"));
});
}
foo.addEventListener("animationstart", listener, false);
foo.addEventListener("animationend", listener, false);
foo.addEventListener("animationiteration", listener, false);
foo.addEventListener("click", () => {
foo.className = "foo";
requestAnimationFrame(() => {
foo.className += " start";
});
});
</script>
</body>
</html>我认为用这个例子，更好说明什么时候使用 一个 requestAnimationFrame，什么时候可以使用两个 requestAnimationFrame嵌套。 translation: I think this example is better to illustrate when to use one requestAnimationFrame or two nested requestAnimationFrames. |
|
@yin1999 I think this issue should be transfered to |
I'm not really sure about it. To discuss with others, I've translated it into english. /cc @sideshowbarker @mdn/yari-content-css |
github-actions
bot
added
Content:CSS
sideshowbarker
added
help wanted
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
MDN URL: https://developer.mozilla.org/docs/Web/CSS/CSS_Animations/Tips
What information was incorrect, unhelpful, or incomplete?
When I tested the first requestAnimationFrame callback, the style was actually computed。
Specific section or headline?
javascript_content
What did you expect to see?
Did you test this? If so, how?
MDN Content page report details
zh-cn/web/css/css_animations/tipsThe first test
testing code
Result
在进行重绘之前似乎已经计算好了样式值，可以正常运行动画。
translation: The style value seems to be computed before doing the repaint, and the animation runs fine.
The second test
testing code
Result
在进行重绘之前似乎已经计算好了样式值，可以正常运行动画，并且会有2次重绘。
translation: The style value seems to be computed before doing the repaint, the animation runs fine, and there are 2 repaints.
My thought
这里只调用一次 requestAnimationFrame 也是可以的，并且可以省去一次 paint 。我很疑惑，这里为什么一定要调用两次requestAnimationFrame。期望可以解答疑惑。
translation: It is also possible to call requestAnimationFrame only once here, and it can reduce one time for painting. I am puzzled why requestAnimationFrame must be called twice here. Hope to answer questions.
The text was updated successfully, but these errors were encountered: