我正在嘗試創建影片，當我單擊按鈕時，數字應一一向左移動。這行得通，但問題是當影片完成時，它們會回到右邊。影片完成后如何使它們保持在左側？演示
import React from 'react';
import './style.css';
export default function App() {
let [animate, setAnimate] = React.useState(false);
return (
<div>
<button
onClick={() => {
setAnimate(true);
}}
>
animate
</button>
{[1, 2, 3, 4, 5, 6, 7].map((x, i) => {
return (
<div
className={animate ? 'fadein-item' : 'initial-item'}
style={{ animationDelay: `${i}s` }}
>
{x}
</div>
);
})}
</div>
);
}
css
.initial-item {
transform: translateX(200px);
}
.fadein-item {
transform: translateX(200px);
animation-name: fadeIn;
animation-duration: 2s;
}
@keyframes fadeIn {
from {
transform: translateX(200px);
}
to {
transform: translateX(0px);
}
}
uj5u.com熱心網友回復：
使用animation-fill-mode: forwards. 這將保留關鍵幀影片的最后一個影片幀。
您還可以將影片屬性與速記結合起來：
animation: fadeIn 2s forwards;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/496878.html
上一篇：使用HTACCESS從ServerVariables中洗掉SERVER_SOFTWARE
下一篇：表格行上的底線分隔符全寬