我正在尝试在ReactJS中设置脉动动画的关键帧.我尝试在内联样式中设置关键帧,但这不起作用.
const NewRelpyheButton = ({style = {},open,handleOPenSettings}) => {
var bar = {
color: '#000',padding: '1em 0',fontSize: '20px',textAlign: 'center',cursor: 'pointer',position: 'fixed',bottom: '0',width: '100%',zIndex: '10',animation: 'pulse 1.2s ease-in-out',animationIterationCount: 'infinite',}
Object.assign(style,{});
let openModal;
if (open) {
openModal = <Modal><NewRelpyhe/></Modal>
}
return (
<div>
{openModal}
<Bar color='purple' style={bar} onClick={handleOpenSettings}>
create a new relphye site
</Bar></div>
)
}
我想在css中模仿this：
.element {
width: 100%;
height: 100%;
animation: pulse 5s infinite;
}
@keyframes pulse {
0% {
background-color: #001F3F;
}
100% {
background-color: #FF4136;
}
}
html,body {
height: 100%;
}
解决方法
如果您希望将所有样式与组件紧密耦合,请将样式组件放在一边.他们有一个
helper for keyframes
例如
import styled,{ keyframes } from 'styled-components'
const pulse = keyframes`
from {
background-color: #001F3F;
}
to {
background-color: #FF4136;
}
`
const Bar = styled.div`
color: #000;
padding: 1em 0;
font-size: 20px,text-align: center;
cursor: pointer;
position: fixed;
bottom: '0',width: 100%;
z-index: 10;
animation: ${pulse} 1.2s ease-in-out;
animation-iteration-count: infinite;
`
然后像这样使用：
<Bar>I pulse</Bar>
