анимация slideUp () и slideDown () с использованием React.js

Я создал компонент реагирования, который состоит из анимации slideUp () и slideDown (). Я реализовал с помощью методов jQuery slideup и slidingown.

Я должен реализовать эту функцию, используя реакцию анимации.

Я читаю оReactTransitionGroup а такжеReactCSSTransitionGroup, Способ объяснения научил меня, мы можем сделать эту функцию, когдаDOMNode подключен к компоненту или демонтирован (поправьте меня, если я не прав).

Мой вопрос -> как сделать slideup () и slidedown () реагирующим образом и без использования jQuery.

Смотрите это jsFiddle дляhttps://jsfiddle.net/guc3yrm1/

P.S -> Пожалуйста, объясните мне, почему эта часть анимации реагирования кажется немного трудной, если сравнивать с jQuery (я парень из jQuery)

var Hello = React.createClass({
    getInitialState: function() {
        return {
            slide: false,
        }
    },
    slide: function() {
        if (this.state.slide) {
            $(this.refs.slide).slideDown();
            this.setState({
                slide: false
            });
        } else {
            $(this.refs.slide).slideUp();
            this.setState({
                slide: true
            });
        }
    },
    render: function() {
        return ( 
            <div>
                <input type = "button" value = "clickme" onClick = {this.slide}/> 
                <br />
                <br />
                <div className = "slide" ref="slide" >< /div>
            </div>
        );
    }
});

ReactDOM.render( < Hello name = "World" / > ,
    document.getElementById('container')
);
 Thinker07 июн. 2016 г., 12:47
 Chris07 июн. 2016 г., 12:44
Просто любопытно: почему вы не хотите использовать jQuery здесь?
 Vimal Ramakrishnan07 июн. 2016 г., 12:53
@ Крис, я могу сделать это с помощью jQuery. Мне любопытно, как это сделать в ReactionTransitionAPI для статического содержимого в компоненте реакции. В конце концов мы можем избежать нежелательного повторного рендеринга с использованием способа реакции

Ответы на вопрос(3)

Вот решение, которое вообще не требует React Css Transition Group. Я лично фанат классных переключателей. Это было то, что вы можете создать анимацию CSS, как вам нравится.

https://jsfiddle.net/fyuh32je/3/

(весь код в скрипке)

class Example extends React.Component{
    constructor(props) {
        super(props);
        this.state = { visible: 'panel' };
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({ visible: this.state.visible == 'panel'? 'panel visible' : 'panel' });
    }

    render() {
        return <div>
            <button onClick={this.handleClick}>{!this.state.visible == 'panel' ? 'Slide up' : 'Slide down'}</button>
                <div className={this.state.visible}>
                <p>This is some dynamic content!</p>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
              </div>
        </div>
    }
}

React.render(<Example />, document.getElementById('container'));

Я знаю, что использовать видимую переменную состояния - это грязно, но я на работе, и у меня не было слишком много времени, чтобы изменить слишком много. Обратите внимание, что мы используем видимый класс для переключения контейнера div с анимацией.

Вообще говоря. Контейнеры динамической высоты можно анимировать с помощью хакерского использования атрибута max-height в css.

 Jordan Enev17 февр. 2017 г., 12:06
Эй, спасибо за ваши усилия! На самом деле вы жестко программируете значение высоты панели, как только она станет видимой. Идея состоит в том, чтобы все было динамичным, то есть высота панели должна соответствовать высоте содержимого панели. Пожалуйста, проверьте мой пример Javascript. Также используяReactCSSTransitionGroup Вы можете пропустить настройку вручную имен классов CSS.
 noa-dev17 февр. 2017 г., 12:14
Извините, я забыл удалить объявление с фиксированной высотой. Я обновил свою JS Fiddle. Вы можете ясно видеть, что контейнер ведет себя динамически по отношению к своему содержимому и анимируется при открытии без фиксированной высоты. Вы можете проверить и удалить или добавить несколько текстовых строк.
 Jonca3308 февр. 2018 г., 21:48
@ noa-dev, как я могу адаптировать твою логику по ссылке ниже, сохранив мои существующие функциональные возможности события щелчка? Я все еще зеленый реагирую. посмотри пожалуйста:stackoverflow.com/questions/48692961/...
 Jordan Enev17 февр. 2017 г., 14:55
Спасибо за обходной путь! Как вы уже упоминали, это немного хакерский способ сделать это. Также вы должны обрабатывать имена классов CSS вручную. Наверняка я предпочту способ анимации React! Спасибо за вклад!

slideDown/slideUp, затемреагируют-slidedown кажется простым в использовании компонентом реакции. Это страница GitHub имеетдемонстрация а такжепример кода.

чие:

ReactTransitionGroup - это API, на котором построен ReactCSSTransitionGroup. Основное различие между ними заключается в том, что анимации ReactTransitionGroup написаны на языке Jav, вместо алфавита CSS, и предоставляется обратный вызов, который вызывается, когда анимация завершена, а не полагается на события перехода CSS.

Мой вывод - использовать CSS-анимацию для простых задач, а Javascript - для сложных.

Например, если компонент имеет статическую высоту - вы можете реализовать его через CSS, как показано в примере ниже. Но если ширина / высота являются динамическими, то вы можете сделать это с помощью Javascript. В примере с Javascript я использую библиотеку Velocity для анимации.Это производительность лучше, чем анимация jQuery, Конечно, вы можете реализовать анимацию самостоятельно, но зачем изобретать велосипед?

Я реализовал slideUp / slideDown с обоими API. Проверьте это ниже.

(CSS) Реализация через ReactCSSTransitionGroup:

const CSSTransitionGroup = React.addons.CSSTransitionGroup;
const TransitionGroup = React.addons.TransitionGroup;

class Example extends React.Component{
    constructor(props) {
        super(props);
        this.state = { visible: false };
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
    	this.setState({ visible: ! this.state.visible });
    }

    render() {
        return <div>
            <button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button>
            <CSSTransitionGroup transitionName="example">
            	{ this.state.visible ? <div className='panel' /> : null }
            </CSSTransitionGroup>
        </div>
    }
}

React.render(<Example />, document.getElementById('container'));
.panel {
    width: 200px;
    height: 100px;
    background: green;
    margin-top: 10px;
}

.example-enter {
    height: 0px;
}

.example-enter.example-enter-active {
    height: 100px;
    -webkit-transition: height .3s ease;
}

.example-leave.example-leave-active {
    height: 0px;
    -webkit-transition: height .3s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JSFiddle - Реагировать на слайды вверх и вниз по анимации - CSS Transtion Group.

(Javascript) Реализация через ReactTransitionGroup:

const TransitionGroup = React.addons.TransitionGroup;

class Example extends React.Component{
    constructor(props) {
        super(props);
        this.state = { visible: false };
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({ visible: ! this.state.visible });
    }

    render() {
        return <div>
            <button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button>
                <TransitionGroup>
                    { this.state.visible ? <Accordion /> : null }
                </TransitionGroup>
            </div>
        }
    }

    class Accordion extends React.Component {
        componentWillEnter (callback) {
            const element = this.container.getDOMNode();
            Velocity(element, 'slideDown', { duration: 300 }).then(callback);
        }

        componentWillLeave (callback) {
            const element = this.container.getDOMNode();
            Velocity(element, 'slideUp', { duration: 300 }).then(callback);
        }

        setContainer(c) {
            this.container = c;
        }

        render() {
            return <div className="panel" ref={this.setContainer.bind(this)}>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            </div>
        }
    }

React.render(<Example />, document.getElementById('container'));
.panel {
    background: green;
    margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.3/velocity.min.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JSFiddle - Реагировать на слайды вверх и вниз по анимации - Javascript Transition group.

Кредиты:

Анимации с ReactTransitionGroupCSS против JS Animation: что быстрее?
 noa-dev17 февр. 2017 г., 11:52
@JordanEnev Разветвлен и упомянул вас в моем ответе :)
 Jordan Enev17 февр. 2017 г., 11:10
Эй, в этом случае мы можем реализовать это через Javascript - ReactTransitionGroup. Я обновил свой ответ и добавил пример Javascript с Velocity.
 noa-dev17 февр. 2017 г., 11:09
.invisble {max-height: 0%; переполнение: скрыто;} .visible {max-height: 100%; }
 Phil Andrews08 июн. 2017 г., 17:44
@JordanEnev Я считаю, что это работает, только если добавлен атрибут компонента, т.е.<CSSTransitionGroup component="div"...
 Vic16 февр. 2017 г., 21:35
Что делать, если панель не имеет фиксированной высоты?
 Jordan Enev17 февр. 2017 г., 11:20
@ noa-dev не могли бы вы раскошелиться на мой JSFiddle и сделать это через CSS?jsfiddle.net/jordan_enev/xtbxk20g

Ваш ответ на вопрос