我正在使用一个新库来创建 React 组件,Styled-Components。
我想通过 onClick 在我的组件上应用动画 Tremble。
export class FormLoginTest extends React.Component { // eslint-disable-line react/prefer-stateless-function
static propTypes = {
isTrembling: React.PropTypes.bool
};
static defaultProps = {
isTrembling: true
};
onMakeTremble() {
alert("hello")
}
render() {
return (
<Form >
<ContainerFluid>
<H2>Login</H2>
</ContainerFluid>
<ContainerFluid>
<Label htmlFor="username">Username</Label>
<Input type="text" id="username" placeholder="bob" autoCorrect="off" autoCapitalize="off" spellCheck="false" />
</ContainerFluid>
<ContainerFluid>
<Label htmlFor="password">Password</Label>
<Input id="password" type="password" placeholder="••••••••••" />
</ContainerFluid>
<ContainerFluid>
<Button nature="success" onClick={this.onMakeTremble}>Hello</Button>
</ContainerFluid>
</Form>
);
}
}
所以没有带有样式组件的 Style.css 表,所有 css 都是通过 javascript 应用的。表单已经应用了CSS:
export class Form extends React.Component {//eslint-disable-line React/prefer-stateless-function
static propTypes = {
children: React.PropTypes.node.isRequired,
className: React.PropTypes.string
};
//
static defaultProps = {
isTrembling: true
};
render() {
return (
<form className={this.props.className}>
{React.Children.toArray(this.props.children)}
</form>
);
}
}
// eslint-disable-next-line no-class-assign
Form = styled(Form)`
max-width: 800px;
margin:0 auto;
display: block;
height: 100%;
border: 1px solid grey;
& h2{
text-align:center;
};
`;
export default Form;
我还有一个 Tremble 组件:
const shake = 关键帧` 10%, 90% { 变换:translate3d(-1px, 0, 0); }
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
`;
const Tremble = styled.div`
display: inline-block;
&:hover {
animation: ${shake} 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
`;
export default Tremble;
关于这如何运作有任何线索吗?
最佳答案
查看关键帧部分下的文档。 https://www.npmjs.com/package/styled-components
您可以尝试从 'styled-components'
导入关键帧并像这样使用它:
示例
import styled, {keyframes} from 'styled-components';
const moveGradient = keyframes`
0%{background-position:38% 0%}
50%{background-position:63% 100%}
100%{background-position:38% 0%}
`;
const Wrapper = styled.div`
background-size: 800% 800%;
width: 100vw;
height: 100vh;
background: linear-gradient(${props => props.gradientRotation}, #cc6bbb, #ffa86d);
animation: ${moveGradient} 10s ease-out infinite;
`;
我自己遇到了关键帧问题,因为此代码不适用于我的渐变动画,但适用于其他动画。
稍后我将在此处的评论中链接到我的问题/问题:)!
关于animation - 使用样式组件时将动画应用到 React 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40353742/