Question

我有一个问题是我的下拉 css transition 动画不起作用，我正在使用 react 来显示丢失的表单。我使用 react-bootstrap 库来构建我的界面，并使用 <Form.Control as="select" /> 来触发缺少表单的显示和向下滑动过渡 css 动画。

MainForm.jsx

import React, { Component } from 'react';
import { Form } from 'react-bootstrap';
import ShowOtherForm from './other-form';

export class MainForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showClass: '',
            isShow: false,
            item: ''
        }

        this.handleShowForm = this.handleShowForm.bind(this);

    }

    handleShowForm(event) {
        var selectedItem = event.target.value;
        this.setState({
            item: selectedItem,
            showClass: selectedItem === "Item1" ? 'show-missing-component' : '',
            isShow: selectedItem === "Item1" ? true : false
        });
    }

    render() {
        return(
            <Form>
                <Form.Row>
                    <Form.Group>
                        <Form.Label>Select Item</Form.Label>
                        <Form.Control as="select" onChange{selected => this.handleShowForm(selected)}>
                            <option value="Item1">Item 1</option>
                            <option value="Item2">Item 2</option>
                        </Form.Control>
                    </Form.Group>
                </Form.Row>
                <div id="transition-row" className={this.state.showClass}>
                {
                    (this.state.selectedItem === "Item1") && (
                        <ShowOtherForm />
                    )
                }
                </div>
            </Form>
        )
    }
}

export default MainForm;

ShowOtherForm.jsx

import React, { Component } from 'react';
import { Form } from 'react-bootstrap';

export class ShowOtherForm extends Component {
    constructor(props) {
        super(props);
    }
    
    render() {
        return (
            <Form.Row>
                <Form.Group>
                    <Form.Label>Sample Input Text</Form.Label>
                    <Form.Control placeholder="Try sample input text"></Form.Control>
                </Form.Group>
            </Form.Row>
        )
    }
}

export default ShowOtherForm;

main.css

#transition-row {
   max-height: 0%;
}

#transition-row.show-missing-component {
    max-height: 100%;
    transition: 0.5s ease;
}

当我在 Item1 输入标签中选择 select 时，我想实现某种向下滑动转换以显示缺少的表单/组件。问题是显示过渡永远不会奏效。有没有办法触发动画。我避免使用库，因为我只需要使用它一次。

附言表单的显示有效，只有滑下过渡无效。

Css 下拉幻灯片过渡动画无法使用 React

0 个答案: