animated dropdown(transitionEnter, transitionLeave) not working

[seoyoochan]

I followed the example JSX code from the animated dropdown. if I pass transitionEnter, transitionLeave to true for <MultiSelect>, the dropdown does not display because of the height set to 0px on the dom.

when those are false, it works without animation.

[furqanZafar]

unable to reproduce, here is a pen illustrating animation for MultiSelect (using version 0.9.0) with default theme http://codepen.io/furqanZafar/pen/aNJdmg

[seoyoochan]

@furqanZafar I followed your example. and the pure html renders like the below.. I don't understand why the style of height is 0px. This only works without transition hooks. :confused:

<div class="dropdown-menu-wrapper default react-selectize multi-select " style="height: 0px;">
  <div class="dropdown-menu default react-selectize multi-select">
    <div class="option-wrapper highlight">
      <div class="simple-option">
        <span>1</span>
      </div>
    </div>
    <div class="option-wrapper">
      <div class="simple-option">
        <span>2</span>
      </div>
    </div>

    <div class="option-wrapper">
      <div class="simple-option">
        <span>3</span>
      </div>
    </div>
  </div>
</div>

@furqanZafar I would create another package integrating react-motion for the animation. I found the reason why it does not show up.

[cheahkhing]

@seoyoochan can you explain a little bit more why it doesn't work with the animation? i also seeing some issues when i turn on animation. mine 1 simply throwing exceptions on react. React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of DropdownMenu. i thought it is just my integration issue. maybe i can get some ideas from you.

[furqanZafar]

A codepen / jsfiddle would help, I am unable to reproduce these issues with animation. Do you have similar issues with the example here (http://furqanzafar.github.io/react-selectize/#/?category=multi&example=animated-dropdown) or the codepen I posted earlier?

[seoyoochan]

@cheahkhing I think you exported React component incorrectly. that's usually happens when export was not correct.

@furqanZafar http://codepen.io/seoyoochan/pen/VaWLwj#0

[furqanZafar]

@seoyoochan here is the fixed pen (with a working animated dropdown) http://codepen.io/furqanZafar/pen/GZEJqv)

These are my changes:

• use react-with-addons: https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.min.js
• removed SASS preprocessor (you can also use the CSS file available on CDN https://npmcdn.com/react-selectize@0.9.0/dist/index.min.css)
• removed unwanted import statements

[seoyoochan]

@furqanZafar thanks, maybe I am missing to install some dependencies? :confused: