Applying motion to className (for display:none)

[yarnball]

Hi,

This looks like a great project.

I'm using an active class to display results. When I add an item to this list, the transition occurs. However, when the className noResult (which is display:none) is applied- it shows nothing.

How can I get the transition to apply on my class name noResult?

I put this in a codesandbox (https://codesandbox.io/s/o2LyXwxyL). Use the filters, and the display:none will be applied. That's where I want the transition states.

      <Transition
        component={false}
        enter={{
          opacity: 1,
        }}
        leave={{
          opacity: 0,
        }}>  
            <li key={result.id} className={isActive ? 'result' : 'noResult'}>
              {result.name} {' '} {result.id}
              ({result.genres.map(x => x.name).join(', ')}){' '}
            </li>
        </Transition>