Определить порядок CSS переходов - PullRequest
Новая
       49

Определить порядок CSS переходов

0 голосов
/ 11 февраля 2020

Прикольная проблема, которая у меня возникла, хотя я держу пари, что есть хитрый способ ее решения.

Дело в том, что у меня есть таблица с тремя состояниями сортировки столбцов: совершенно не отсортированные, в этом случае я не делаю хочу любой значок, отсортированный по возрастанию, в котором я хочу стрелку вверх, и отсортированный по убыванию, в котором я хочу стрелку вниз.

щелкнув заголовок столбца, вы проведете вас через эти три состояния.

starts off => click => ascending => click => descending => click => back to off

Все это прекрасно работает и отлично, за исключением того факта, что я хочу использовать тот же элемент каретки, а затем используйте css переходы , чтобы увеличить его с opacity: 0 до opacity: 1, затем нажмите rotate it 180deg, чтобы показать стрелку вниз для спуска, и, наконец, при повторном нажатии для удалите сортировку, я хочу, чтобы она исчезла БЕЗ ВРАЩАЮЩИХСЯ ОБРАТНО К 0 ДЕГ

В этой последней части находится проблема.

РЕДАКТИРОВАТЬ

Я только воссоздал поведение в песочнице, но я действительно использую react-table, поэтому существует только три возможных состояния, поскольку оно контролируется пакетом: 

initial state: {showCaret: false, flipped: false}
first click: {showCaret: true, flipped: false}
second click: {showCaret: true, flipped: true}
third click, back to initial: {showCaret: false, flipped: false}

изменения состояния контролируются react-table, поэтому я не могу установить setTimeout для перевернутой переменной.

Я ищу чисто CSS способ достижения этой цели без манипулирования способом изменения состояния, если это возможно

END EDIT

Я приложил коды и коробку для демонстрации. Сначала нажмите «Показать каретку», затем «Отразить каретку», затем «Скрыть каретку». css настроен в основном так же, как мой в настоящее время в моем реальном проекте.

https://codesandbox.io/embed/admiring-rain-svsc9?fontsize=14&hidenavigation=1&theme=dark

Ответы [ 2 ]

1 голос
/ 11 февраля 2020

Звучит так, как будто вы хотите, чтобы стрелка исчезла, но не повернулась назад к исходной ориентации при исчезновении.

Поскольку вы обрабатываете и отслеживаете все это с состоянием React, вы можете просто установить эти два состояния по отдельности с интервалом в 0,3 секунды (поскольку это ваше CSS время перехода).

Вы может сделать это несколькими способами. Чтобы продемонстрировать это, в этой развилке вашего примера вы просто устанавливаете видимость вкл / выкл в выключенное состояние, а затем отдельно, в componentDidUpdate, я наблюдаю за ним каждый раз, когда он выключается, и в этот момент он ждет 300 мс (.3s) и затем устанавливает состояние поворота обратно. 

componentDidUpdate(oldProps, oldState) {
    if (oldState.showCaret && !this.state.showCaret) {
      //it was just hidden
      setTimeout(() => {
        this.setState({
          flipped: false
        });
      }, 300);
    }
}

https://codesandbox.io/s/sparkling-pine-9igec

РЕДАКТИРОВАТЬ, с CSS единственным решением

https://codesandbox.io/s/pensive-wilbur-opxzf 

/* flipped taking care of rotating the img tag */
.image {
  transition: transform 0.3s linear 2s;
}
.flipped {
  transform: rotate(180deg);
  transition: transform 0.3s;
}
0 голосов
/ 11 февраля 2020

Измените 


    onClick={() => this.setState({ showCaret: false, flipped: false })}

на 


    onClick={() => this.setState({ showCaret: false })}

и оно должно работать.

...