在React和MDBootstrap

Question

我有一个像这样的反应下拉列表，并使用mdbreact来显示它。问题是默认情况下有一个很长的淡入淡出过渡来显示和隐藏下拉列表。我想知道是否有办法改变转变/加快转变。

import React, {Component} from 'react';
import '../styles/viewList.css';
import { Dropdown, DropdownToggle, DropdownMenu, Input } from 'mdbreact';

class OptionDropDown extends Component {
constructor(props) {
    super(props);
    this.context = (this.props.context);
    console.log(this.context);
    this.toggle = this.toggle.bind(this);
    this.state = {
        dropdownOpen: false,
    };
}
toggle() {
    this.setState({
        dropdownOpen: !this.state.dropdownOpen
    });
}


render(){
    return(
    <Dropdown isOpen = { this.state.dropdownOpen } toggle = { this.toggle } size="sm">
        <DropdownToggle style={{margin:0}} color="primary" >
            <div style={{cursor:"pointer"}} className="menu-for-item"></div>
        </DropdownToggle>
        <DropdownMenu>
                <a id="dmenu-1" onClick={(e) => {this.toggle(); this.props.handleMenuClick(e,"d-menu-1")}} className="color-box" style={{backgroundColor: "#21ff84"}}>
                    <i className="fa fa-chevron-up"></i>
                </a>
                <a id="dmenu-2" onClick={(e) => {this.toggle(); this.props.handleMenuClick(e,"d-menu-2")}} className="color-box" style={{backgroundColor: "#ff7449"}}>
                    <i className="fa fa-chevron-down"></i>
                </a>
                <a id="dmenu-3" onClick={(e) => {this.toggle(); this.props.handleMenuClick(e,"d-menu-3")}} className="color-box" style={{backgroundColor: "#7af1ff"}}>&nbsp;</a>
        </DropdownMenu>
    </Dropdown>

    );
 }
}

这是我在调试器上看到的内容。有没有办法删除那个过渡元素？

The transition element