Анимация из трех кнопок, которая мгновенно смешивается, мигает при переходе от точки 1 к точке 3 или наоборот - PullRequest
Новая
       14

Анимация из трех кнопок, которая мгновенно смешивается, мигает при переходе от точки 1 к точке 3 или наоборот

0 голосов
/ 26 апреля 2019

Я создал трехкнопочную анимацию для плавного перехода между каждой из кнопок.

Когда вы нажимаете кнопку мыши, остальные появляются вместе с непрозрачностью от 1 до 0,5;когда вы переходите от этой кнопки к другой, она сохраняет плавный переход с тем же эффектом, что и раньше;когда вы onMouseLeave, они возвращаются на свое первоначальное место.

Проблема возникает, когда onMouseEnter из «6-го класса» в «8-й класс» или наоборот очень быстро (нормальный темп поддерживает плавный переход).Проблема: условие на конечной кнопке запускается один раз, затем условие средней кнопки срабатывает на основе выходных данных из условия конечной кнопки, а затем запускает конечное назначение во второй раз.

См. Это видеодля демонстрации переходов и вопроса: https://www.youtube.com/watch?v=S2ZxqF3n7AY&feature=youtu.be

HTML: 

      <div className="w-60 flex justify-between" onMouseLeave={() => this.handleGradeAnimationOut("six-grade", "seven-grade", "eight-grade")}>
        <div className="question-text semiboldFont buttonSixGradeAlreadyHovered" id="six-grade" onMouseEnter={() => this.handleSixGradeAnimationHover("six-grade", "seven-grade", "eight-grade")}>
          <h4 className="ba pa3 mr2 br2">{"6th Grade"}</h4>
        </div>
        <div className="question-text semiboldFont buttonSevenGradeAlreadyHovered" id="seven-grade" onMouseEnter={() => this.handleSevenGradeAnimationHover("six-grade", "seven-grade", "eight-grade")}>
          <h4 className="ba pa3 mr2 br2">{"7th Grade"}</h4>
        </div>
        <div className="question-text semiboldFont buttonEightGradeAlreadyHovered" id="eight-grade" onMouseEnter={() => this.handleEightGradeAnimationHover("six-grade", "seven-grade", "eight-grade")}>
          <h4 className="ba pa3 mr2 br2">{"8th Grade"}</h4>
        </div>
      </div>

CSS: 

@keyframes sixGradeIn {
  0% {opacity: 0.5; transform: translateX(40px);}
  100% {opacity: 1; transform: translateX(0px);}
}

@keyframes sevenGradeIn {
  0% {opacity: 0.5; transform: translateX(-40px);}
  100% {opacity: 1; transform: translateX(0px);}
}

@keyframes eightGradeIn {
  0% {opacity: 0.5; transform: translateX(-80px);}
  100% {opacity: 1; transform: translateX(0px);}
}

@keyframes sixGradeIn2 {
  0% {opacity: 0.5; transform: translateX(80px);}
  100% {opacity: 1; transform: translateX(0px);}
}

@keyframes sevenGradeIn2 {
  0% {opacity: 0.5; transform: translateX(40px);}
  100% {opacity: 1; transform: translateX(0px);}
}

@keyframes eightGradeIn2 {
  0% {opacity: 0.5; transform: translateX(-40px);}
  100% {opacity: 1; transform: translateX(0px);}
}

@keyframes sixGradeIn3 {
  0% {opacity: 0.5; transform: translateX(80px);}
  100% {opacity: 1; transform: translateX(40px);}
}

@keyframes sevenGradeIn3 {
  0% {opacity: 0.5; transform: translateX(80px);}
  100% {opacity: 1; transform: translateX(40px);}
}

@keyframes eightGradeIn3 {
  0% {opacity: 0.5; transform: translateX(80px);}
  100% {opacity: 1; transform: translateX(40px);}
}

@keyframes sixGradeOut {
  0% {opacity: 1; transform: translateX(0px);}
  100% {opacity: 0.5; transform: translateX(40px);}
}

@keyframes sevenGradeOut {
  0% {opacity: 1; transform: translateX(0px);}
  100% {opacity: 0.5; transform: translateX(-40px);}
}

@keyframes eightGradeOut {
  0% {opacity: 1; transform: translateX(0px);}
  100% {opacity: 0.5; transform: translateX(-80px);}
}

@keyframes sixGradeReplace {
  0% {opacity: 1; transform: translateX(0px);}
  100% {opacity: 0.5; transform: translateX(80px);}
}

@keyframes sevenGradeReplace {
  0% {opacity: 1; transform: translateX(0px);}
  100% {opacity: 0.5; transform: translateX(40px);}
}

@keyframes eightGradeReplace {
  0% {opacity: 1; transform: translateX(-80px);}
  100% {opacity: 0.5; transform: translateX(-40px);}
}

@keyframes sixGradeTranslate {
  0% {opacity: 1; transform: translateX(80px);}
  100% {opacity: 0.5; transform: translateX(40px);}
}

@keyframes eightGradeTranslate {
  0% {opacity: 1; transform: translateX(-40px);}
  100% {opacity: 0.5; transform: translateX(-80px);}
}

@keyframes sixGradeUltimate {
  0% {opacity: 1; transform: translateX(40px);}
  100% {opacity: 0.5; transform: translateX(80px);}
}

@keyframes eightGradeUltimate {
  0% {opacity: 1; transform: translateX(0px);}
  100% {opacity: 0.5; transform: translateX(-40px);}
}

JavaScript: (не удалось опубликовать ..Он превышает ограничение в 30000 символов)

...