如何解决反应:animationOut 不显示使用 Animated.css
我使用了 https://www.npmjs.com/package/react-animated-css 并且在显示内容时效果很好,这意味着在显示内容后动画正在播放。
现在我按下切换按钮,内容立即消失,没有动画。
我检查了控制台,animationOut 的类正在工作,但似乎内容在动画有时间播放之前关闭,所以它被隐藏了。
如何解决这个问题?
工作代码:https://stackblitz.com/edit/react-sorgz5?file=src/App.js
import React,{ Component } from "react";
import ContentComponent from "./content.js";
import { Animated } from "react-animated-css";
export default class toggleComponent extends React.Component {
constructor() {
super();
this.state = {
isShowBody: false
};
}
handleClick = event => {
this.setState({ isShowBody: !this.state.isShowBody });
};
checkBox = () => {
return (
<div>
<span className="switch switch-sm">
<label>
<input
type="checkBox"
name="select"
onClick={this.handleClick.bind(this)}
/>
<span />
</label>
</span>
</div>
);
};
render() {
return (
<div>
{this.checkBox()}
<Animated
animationIn="bounceInLeft"
animationOut="fadeOut"
isVisible={this.state.isShowBody}
>
<div>{this.state.isShowBody && <ContentComponent />}</div>
</Animated>
</div>
);
}
}
解决方法
解决了。我需要删除 interface IField<V> {
value: V;
}
class Field<V> implements IField<V> {
value: V;
constructor(params: { value: V }) {
this.value = params.value;
}
}
type TFields<T> = { [K in keyof T]: T[K] extends IField<T[K]> ? IField<T[K]> : TFields<T[K]> }
class Form<T> {
fields: TFields<T>;
constructor(fields: TFields<T>) {
this.fields = fields;
}
}
/*
Expected:
{
id: IField<string>,auth: {
login: IField<string>,password: IField<number>,code: {
isValid: IField<boolean>
}
}
}
Received:
{
id: string,auth: TFields<{
login: string,password: number,code: TFields<{
isValid: boolean
}>
}>
}
*/
type FormSchema = {
id: string,auth: {
login: string,code: {
isValid: boolean
}
}
}
const form = new Form<FormSchema>({
id: new Field({ value: '' }),auth: {
login: new Field({ value: '' }),password: new Field({ value: 0 }),code: {
isValid: new Field({ value: false })
}
},})
中的 this.state.isShowBody
,因此可见性的条件是由 <div>
控制。
isVisible
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。