Создать реактивную вспышку цветовой составляющей

Question

Создать реактивную вспышку цветовой составляющей

Я не знаю, планируете ли вы, чтобы столбец occurrence появлялся в результирующем наборе. Предполагая, что вы этого не сделаете, вам просто нужно предложение ORDER BY. Предполагая, что вы делаете , нам нужно больше работать. Один простой подход - использовать коррелированный подзапрос, чтобы найти номер события:

SELECT
    idlogin_details,
    emp_id,
    date,
    (SELECT COUNT(*) FROM login_details t2
     WHERE t1.emp_id = t2.emp_id AND t2.date <= t1.date) occurrence
FROM login_details t1
ORDER BY
    emp_id, date;

Демо

0

reactjs colors blink

задан dttung1412 20 January 2019 в 07:34

2 ответа

Другие вопросы по тегам:

reactjs colors blink

Похожие вопросы:

score 0 · Answer 1

Мне было интересно, как определить предыдущее значение после изменения компонента, и я в итоге использовал componentDidUpdate для доступа к предыдущему значению перед рендерингом, я использую Typescript:

import * as React from 'react';
import './ChangeColor.css';

interface IChangeColorProps {
  value: number;
}

interface IChangeColorState {
  stateClass: string;
}

export class ChangeColor extends React.Component<IChangeColorProps, IChangeColorState> {
  private timeout: NodeJS.Timeout;

  public componentDidUpdate(prevProps: IChangeColorProps) {
    if (prevProps.value < this.props.value) {
      this.setState({ stateClass: ' highlight-up' });
    } else if (prevProps.value > this.props.value) {
      this.setState({ stateClass: ' highlight-down' });
    } else {
      return;
    }

    clearTimeout(this.timeout);
    this.timeout = setTimeout(() => {
      this.setState({ stateClass: '' });
    }, 1200);
  }

  public render(): JSX.Element {
    const stateClass = this.state ? this.state.stateClass : '';

    return <span className={`element${stateClass}`}>
      {this.props.value}
    </span>;
  }
}

Использование

[111 ]

score 0 · Answer 2

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

Представьте, у вас есть триггер «Подсветка». Если компонент получает триггерную подсветку, он должен мигать. Что вы можете сделать, это просто добавить это как класс «выделить» для этого элемента, если он должен мигать (в зависимости от триггера). Как только класс добавлен, вы делаете анимационный переход от основного цвета к цвету выделения. Затем, через 2 с (или около того), вы снова удаляете класс, и компонент должен постепенно исчезнуть до основного цвета.

Пока все хорошо.

CSS для этого будет выглядеть примерно так:

.element {
  -moz-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  -webkit-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
  color: black;
  padding: 20px;
}

.highlight {
  color: #ff0000;
}

(. Element - это базовый элемент, который сохраняет логику перехода, .highlight только что включил все, что должно измениться)

Некоторая основная реакция:

const BlinkingComponent = ({ highlighting }) => (
  <div className={`element${highlighting ? " highlight" : ""}`}>Watch Me</div>
);

class App extends React.Component {
  state = {
    highlight: false
  };

  handleClick = () => {
    this.setState({ highlight: true });
    setTimeout(() => {
      this.setState({ highlight: false });
    }, 2000);
  };

  render() {
    const { highlight } = this.state;
    return (
      <div className="App">
        <button onClick={() => this.handleClick()}>Click me</button>
        <BlinkingComponent highlighting={highlight} />
      </div>
    );
  }
}

Посмотрите, как это работает: https://codesandbox.io/s/61502wxlw3