CSSTransition не работает.V2 реакционно-переходная группа - PullRequest
Новая
       19

CSSTransition не работает.V2 реакционно-переходная группа

0 голосов
/ 18 декабря 2018

Итак, у меня есть небольшая часть кода, где я пытаюсь добавить анимацию в качестве оболочки для Tooltip Nodes.Но, возможно, я делаю что-то не так, потому что я не вижу на экране никаких animation, появляющихся во время mount.

Более того, оно даже не запускает console.log при onEnter событии.Почему?

Спасибо. 

import React, { PureComponent } from 'react'
import { CSSTransition } from 'react-transition-group'

import styles from './index.scss'
import './anim.scss'

class ToolTip extends PureComponent {
  render() {
    return (
        <CSSTransition
          in={true}
          classNames={'tooltip'}
          timeout={3000}
          onEnter={() => { console.log('FIRED!') }}
        >
          <div className={`${styles.tooltipContainer}`}>
            <span className={styles.title}>{'title'}</span>
          </div>
        </CSSTransition>
    )
  }
}

export default ToolTip

Редактировать:

мой anim.scss файл: 

.tooltip-enter {
  opacity: 0;

  &.tooltip-enter-active {
    opacity: 1;
  }
}

.tooltip-exit {
  opacity: 1;

  &.tooltip-exit-active {
    opacity: 0;
  }
}

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Я думаю, что ваша проблема скрывается под составом использования css-transition-group.Как уже упоминалось @Dhaval, вам нужно какое-то действие для запуска перехода CSS.Итак, как я вижу, вы пытаетесь сделать что-то без Hello манипуляции с состоянием.

Возможно, вы пытаетесь использовать этот Компонент, завернутый в анимацию, внутри какого-то другого Компонента.Если да, нам нужно установить оболочку анимации CSS Transition Group внутри этого «другого» Компонента и обернуть наш Hello Компонент.

См. Ниже: 

// ..some Wrapper Component where we need to use our Hello Component
import React, { Component } from 'react';
import Hello from '../someWhere'
import { CSSTransition } from 'react-transition-group';
import './anim.scss'

class SomeComponent extends Component {
    constructor() {
        super();
        this.state = {
            isAnimation: false,
        };
    }
    render() {
        return (
            <>
                <CSSTransition
                    in={this.state.isAnimation}
                    classNames={'tooltip'}
                    timeout={300}
                    onEnter={() => {
                        console.log('FIRED!');
                    }}
                >
                    <Hello />
                </CSSTransition>
            </>
        );
    }
}
export default SomeComponent;

и 

// ..our updated Hello Component

import React, { PureComponent } from 'react'

import styles from './index.scss'

class Hello extends PureComponent {
  render() {
    return (
       <div className={`${styles.tooltipContainer}`}>
          <span className={styles.title}>{'title'}</span>
       </div>
    )
  }
}

export default Hello

This is should help you!
0 голосов
/ 18 декабря 2018

Я пробовал с демо-кодом, упомянутым ниже, и в этом коде, когда вы нажимаете на него, он регистрирует консоль с запущенным. 

import React, { Component } from 'react';
import { CSSTransition } from 'react-transition-group';

class Hello extends Component {
    constructor() {
        super();
        this.state = {
            isAnimation: false,
        };
    }
    render() {
        return (
            <>
                <CSSTransition
                    in={this.state.isAnimation}
                    classNames={'tooltip'}
                    timeout={300}
                    onEnter={() => {
                        console.log('FIRED!');
                    }}
                >
                    <div className="star">⭐</div>
                </CSSTransition>
                <button
                    onClick={() => {
                        this.setState({ isAnimation: true });
                    }}
                >
                    Click
                </button>
            </>
        );
    }
}
export default Hello;

Демо

...