如何在动态创建的react组件中添加动画

2023-05-26 admin

我想使用react创建一个类似于选框滚动的动画。但我想不出该怎么做。我附上我的代码如下。如果有人知道如何做到这一点，请帮助或建议一个更好的方法。我是新的反应，刚刚学习了5天。请帮帮忙，我被困在这里了。我的index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<title>React App</title>
<link rel="stylesheet" href="../src/index.css" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="banner" class="marquee">

</div>
<script src="../src/marquee.js"></script>
</body>

</html>

我的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import ImageList from './imageList';
import './index.css';
ReactDOM.render(<ImageList/>,document.getElementById("banner"));

imageList.js

import React from 'react';
import Image from './image';
import {ImageArray} from './images';

const ImageList=()=>{
const imagelist= ImageArray.map((image,i)=>{
    return <Image img={image} key={i}/>;
});
return <ul id="mar" style={{animation:'scroll 1s linear infinite'}}>{imagelist}</ul>;
}
export default ImageList;

image.js

import React from 'react';
const Image=({img})=>{
return(
    <li>
        <img src={require(`./image/${img}`)} alt=""/>
    </li>
);
}
export default Image;

index.css

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

code {
 font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
:root{
--mar-el:14;
--mar-width:80vw;
--mar-height:30vh;
--mar-dis-el:6;
--mar-el-width:calc(var(--mar-width)/var(--mar-dis-el));
--mar-ani-du:calc(var(--mar-el)*1s);
--mar-tran-val:calc(var(--mar-el-width)*var(--mar-el));
}
#banner{

}
.marquee{
width: var(--mar-width);
height: var(--mar-height);
margin: 0 auto;
overflow: hidden;
}
#mar{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
height: 100%;


}
#mar>li{
width: var(--mar-el-width);
-ms-flex-negative: 0;
flex-shrink: 0;
}
#mar>li>img{
width: 100%;
height: 100%;
}

@-webkit-keyframes scroll{
0%{
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
100%{
    -webkit-transform: translateX(-1*var(--mar-tran-val));
    transform: translateX(-1*var(--mar-tran-val));
}
}

@keyframes scroll{
0%{
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
100%{
    -webkit-transform: translateX(-1*var(--mar-tran-val));
    transform: translateX(-1*var(--mar-tran-val));
}
}

marquee.js文件

var root = document.documentElement;
var mar_container = document.querySelector("#mar");
var mar_dis_el = getComputedStyle(root).getPropertyValue("--mar-dis-el");
root.style.setProperty("--mar-el", mar_container.children.length);
for (var i = 0; i < mar_dis_el; i++) {
mar_container.appendChild(mar_container.children[i].cloneNode(true));
}

转载请注明出处:http://www.xinruixiangtm.com/article/20230526/1746253.html