установка анимации на кнопку в реакции - PullRequest
Новая
       6

установка анимации на кнопку в реакции

0 голосов
/ 24 апреля 2020

Эй, ребята, у меня есть компонент кнопки в моем реактивном проекте, поэтому позвольте мне показать код 

class Button extends Component {
  constructor(props){
    super(props)
    this.state = {
      active: false,
    };
  }    

  render() {
    return (
      <button
        className={
          this.state.active
            ?  "thankyou_button_active":"thankyou_button"

        }
        onClick={() =>
          this.setState({ active: !this.state.active })
        }
      >
        Thank you!
      </button>
    );


  }
}

. css 

.thankyou_button_active {
  transition: all 0.4s ease-in;
  background-color: #ff9d72;
  color: white;
  border: 1px solid #ff9d72;
  width: 120px;
  outline: none;
  height: 31px;
  font-weight: 700;
  border-radius: 30px;
  font-size: 15px;
  padding: 6px 10px;
  margin-bottom: 1rem;
  transform: translateY(4px);

}
.thankyou_button {
  border: 1px solid #ff9d72;
  background: white;
  color: #ff9d72;
  width: 120px;
  outline: none;
  height: 31px;
  font-weight: 700;
  border-radius: 30px;
  font-size: 15px;
  padding: 6px 10px;
  margin-bottom: 1rem;
}

Я изменяю класс, назначенный кнопке на событие onClick, поэтому изначально состояние моей кнопки «active» равно false, поэтому назначенный класс - «thankyou_button», но после присвоения первого класса кликов - «thankyou_button_active»

В этом состоянии изменения я хочу, чтобы моя кнопка имела нажатый эффект как go немного вверх / вниз по оси y и возвращаться в исходное положение .... с этой кнопкой css опускается, как я упоминал в классе thankyou_button_active, но не появляется, потому что этот класс все еще остается активным до следующего клика

1 Ответ

1 голос
/ 24 апреля 2020

Попробуйте добавить setTimeout после setState, чтобы снова перевернуть состояние, чтобы класс вернулся обратно в неактивный (или обычный класс) после окончания анимации, вам нужно добавить transition: all 0.4s ease-in; в .thankyou_button класс.

Рабочий код:

Реакция: 

class Button extends Component {
  constructor(props){
    super(props)
    this.state = {
      active: false,
    };
  }    

  render() {
    return (
      <button
        className={
          this.state.active
            ?  "thankyou_button_active":"thankyou_button"

        }
        onClick={() =>
          this.setState({ active: !this.state.active })
          setTimeout(()=>{
            this.setState({ active: !this.state.active })
           },400)
        }
      >
        Thank you!
      </button>
    );


  }
}

css: 

.thankyou_button_active {
  transition: all 0.4s ease-in;
  background-color: #ff9d72;
  color: white;
  border: 1px solid #ff9d72;
  width: 120px;
  outline: none;
  height: 31px;
  font-weight: 700;
  border-radius: 30px;
  font-size: 15px;
  padding: 6px 10px;
  margin-bottom: 1rem;
  transform: translateY(4px);

}
.thankyou_button {
  transition: all 0.4s ease-in;
  border: 1px solid #ff9d72;
  background: white;
  color: #ff9d72;
  width: 120px;
  outline: none;
  height: 31px;
  font-weight: 700;
  border-radius: 30px;
  font-size: 15px;
  padding: 6px 10px;
  margin-bottom: 1rem;
}

ручка: https://codepen.io/davsugi/pen/dyYvOME?editors=0111

...