transitionName animation doesn't work

[erselnordlys]

Hello!

I have an issue trying to add an animation to my component with transitionName prop. My code looks like this:

import * as React from "react";
import styled, { css } from "styled-components";
import RCTooltip from "rc-tooltip";

const TRANS_NAME = "rc-tooltip-zoom";

const overlapMixin = css``;

const Overlay = styled<{ overlap?: boolean }, "div">("div")`
  opacity: 1;
  transition: all 1s linear;

  .rc-tooltip-zoom.rc-tooltip-hidden & {
    opacity: 0;

    transition: all 1s linear;
  }
  
  .rc-tooltip-zoom {
    &-enter & {
      opacity: 0;
    }

    &-enter-active & {
      opacity: 0;
    }
  }
  &-leave & {
      opacity: 1;
    }
  
    &-leave-active & {
      opacity: 0;
    }
  }

  ${({ overlap }) => overlap && overlapMixin};
`;

const overlayDefaultStyle: React.CSSProperties = {
  position: "absolute",
};

export class Popover extends React.Component<any, {}> {
  static defaultProps = {
    placement: "right",
  };

  state = {
    isVisible: true,
  };

  toggleVisibility = () => {
    this.setState({
      isVisible: !this.state.isVisible,
    });
  };

  render() {
    const { placement, anchor, offset, overlap, children } = this.props;

    return (
      <RCTooltip
        overlayClassName={TRANS_NAME}
        overlay={<Overlay overlap={overlap}>{children}</Overlay>}
        trigger={["click"]}
        visible={this.state.isVisible}
        placement={placement}
        align={{ offset }}
        overlayStyle={overlayDefaultStyle}
        transitionName={TRANS_NAME}
        onVisibleChange={this.toggleVisibility}
      >
        {anchor}
      </RCTooltip>
    );
  }
}

I want the <Overlay /> component to fade in and out as I click the anchor button. As I can see, I should give the tooltip's overlay (main positioned container) a classname and add styles (like in react-transition-group) on &-enter, &-enter-active, etc. But somehow, none of these classes seem to appear in DOM. Please, let me know if I got it wrong and it works differently.

[zicodeng]

@erselnordlys Hi, not sure if you are still looking for solutions, hope you already found a workaround (since this is posted long time ago)

Just for reference, here is the demo: http://ztopia-ui.zicodeng.me/components/popper; here is the source code of using transitionName to animate fading: https://github.com/zicodeng/ztopia-ui/blob/master/components/Popper/Popper.css

Please note that in order to animate on component initial mounting, we need to follow ReactCSSTransitionGroup rule here: https://reactjs.org/docs/animation.html#animate-initial-mounting