Нежелательный эффект при наведении CSS-анимации на каждого ребенка во второй раз - PullRequest
Новая
       7

Нежелательный эффект при наведении CSS-анимации на каждого ребенка во второй раз

0 голосов
/ 04 февраля 2019

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

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

Но, если я наведу курсор на заголовок, он будет применять анимацию к заголовку индивидуально, во второй раз.Таким образом, заголовок будет изменен в первый раз, скажем, на 10 пикселей вверх, а когда я наведу на него курсор, он снова увеличится еще на 10 пикселей.Внешний div (родитель) будет перемещаться только один раз. (Нежелательный)

Как будто я применил их собственные анимации к родителю и каждому из дочерних элементов.

Я пытался применить преобразование: нет;всем дочерним элементам, но в моем случае это не поможет.

CSS: 

.badge {
  flex-basis: 50%;
  transform: translateY(0);
  transition-duration: 1s;
  transition-property: transform;
  transition-timing-function: ease-out;
  transition-delay: 1s;
  backface-visibility: hidden;
}

.badge:last-child {
  flex-basis: 100%;
}

.badge :hover {
  transform: translateY(-8px);
}

.badge__badge {
  margin-bottom: 40px;
  margin-right: 40px; 
  width: 99%;
  height: 200px;
  background-color: rgb(27, 139, 45);
  border-radius: 8px;
  color: aliceblue;
  box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4);

}

.badge__prime {
  margin-left: 20px;
  margin-right: auto;

}

.badge__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

}

.badge__icon {
  width: 40px;
  height: auto;
  margin: 10px;

}

.badge__highlight {
  margin-right: auto;
  margin-left: 30px;
  display: flex;
  flex-direction: column;
}

JSX (React):

      <div className="badge">
        <div className="badge__badge"
          style={{ backgroundColor: this.props.backgroundColor }}>
          <div className="badge__content">
            {this.props.prime ? <h4 className="badge__prime">PRIME</h4>
              : <h4 className="badge__prime">Free</h4>}
            <h2 className="badge__title">{this.props.titleBadge}</h2>
            <div className="badge__highlight">
              {this.props.highlightBadge.split('\n').map((i, key) => {
                return <div key={key}>{i}</div>;
              })}
            </div>
          </div>
          <img className="badge__icon"alt="" src={this.props.iconBadge} />
        </div>
      </div>

Ожидаемые результаты: родительский div и все его дочерние элементы будут анимироваться один раз при наведении курсора и возвращаться в свое состояние, как только мышь будетза пределами div.

Фактические результаты: Родительский div и все его дочерние элементы однократно анимируются при наведении курсора, и дочерние объекты снова оживляются, если мышь над нимиз них.

Ссылка на jsfiddle, которая показывает мою проблему

...