Как првильно сделать анимацию при удалении карточки?

Question

[sergeyviktorovich]

сделал так с setTimeout(() ,а анимацию на css ,но это не правильно ,как это сделать без библиотек ?

deleteTaskItem = () => {
        debugger;
        this.divitem.className = this.divitem.className + " del";
        setTimeout(() => {
            let data = { keychapter: this.state.keychapter, keyitem: this.state.keyitem };
            api.removeTaskItem(data, this.props.dispatch);
        }, 1000);


    }

Answer 1

[Виктор Путин]

Как вариант, можно использовать синтетические события.

Если коротко, то подойдет событие onAnimationEnd в которое нужно передать коллбек, который будет выполнен после того как анимация завершится. Где и как добавлять класс с анимациями уже на вашей фантазии

Comments

[sergeyviktorovich]

Виктор Путин, у меня карточка с крестиком , при клике на крестик , я за 1 секунду уменьшаю, через css, а потом удаляю , как эту секунду задержки сделать спомощью синтетических событий?

вот карточка

<div className="TaskItem"
  <div onAnimationEnd={()=>this.remove(item)}  onClick={() => this.deleteTaskItem(item)} 
   className="TaskItem-delete" >
  </div>
</div>

[Виктор Путин]

sergeyviktorovich, В теории, по клику на крестик будет меняться локальный стейт и на карточку добавляться класс с анимацией. Как только анимация завершится, срабатывает onAnimationEnd и выполняет коллбек который переключит состояние карточки и она удалится из дома.
Если не понятно объяснил, вот пример, только с алертом, но принцип точно такой же

[sergeyviktorovich]

Виктор Путин, все равно же придется использовать setTimeout(() => { чтобы поменять класс или как onAnimationEnd отловит конец css анимации ?

[sergeyviktorovich]

Виктор Путин,
у меня анимация при появлении и карточки удалились при появлении ,что не так сделал

deleteTaskItem = () => {
        debugger;
        this.divitem.className = this.divitem.className + " del";
        let data = { keychapter: this.state.keychapter, keyitem: this.state.keyitem };
        api.removeTaskItem(data, this.props.dispatch);
    }
    addDel = () => {
        this.setState({ del: true });
    }

<div className={`task-item ${this.props.attrdata} 
${this.props.data.style !== undefined ? "styled" : ""} 
${this.state.del === true ? "del" : ""}`} 
style={{ "animationDelay": `${this.props.index * 0.05}s`) }}
onAnimationEnd={this.deleteTaskItem}               
>
<span onClick={this.addDel} className="task-item__tools_Trash">{this.icoTrash()}</span>
</div>

[Виктор Путин]

sergeyviktorovich, Нет, при использовании этих методов таймаут не нужен, реакт сам поймет когда закончилась анимация/переход и вызовет коллбек.

Вот очень наглядный пример

[sergeyviktorovich]

Виктор Путин, сдел так чтобы не удалялись при появлении

deleteTaskItem = () => {
        if (this.state.del === true) {
            let data = { keychapter: this.state.keychapter, keyitem: this.state.keyitem };
            api.removeTaskItem(data, this.props.dispatch);
        }
    }

[sergeyviktorovich]

все равно не возникает при удалении сентиическое событие,класс дел добавляется а функция не запускается может нельзя ставить 2 анимации ?
эту при поялении

.zametki-rabota {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
    opacity: 0;
}

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

.task-item.del {
    opacity: 1;
    transform: scale(1) translateZ(0);
    -webkit-animation-name: del;
    animation-name: del;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

deleteTaskItem = () => {
        let isDelete = window.confirm("Вы действительно хотите удалить?");
        if (this.state.del === true && isDelete) {
            this.divitem.className = this.divitem.className + " del";
            let data = { keychapter: this.state.keychapter, keyitem: this.state.keyitem };
            api.removeTaskItem(data, this.props.dispatch);
        }
    }