нахальный вопрос. эффект преобразования не применяется

Question

Может кто-нибудь помочь мне, почему переход не применяется?

html

<div class="box">
  <div class="box__faces">
    <div class="box__faces--front">
      FRONT
    </div>
    <div class="box__faces--back">
      BACK
    </div>
  </div>
</div>

sass

.box
{
  width: 500px;
  height: 500px;
  background: #eee;

  &__faces
  {
    transition: all 0.8s ease;    // this doesn't seem to be applied.

    &--front
    {
      width:150px;
      height:150px;
      background: blue;
    }

    &--back
    {
      width:150px;
      height:150px;
      background: red;
      transform: rotateY(180deg);
    }
  }

  &__faces:hover &__faces--front
  {
    transform: rotateY(180deg);
  }
  &__faces:hover &__faces--back
  {
    transform: rotateY(0deg);
  }
}

У меня здесь есть рабочий кодекс: https://codepen.io/loganlee/pen/RwNJPdZ?editors=1100

Я ожидаю, что преобразование rotateY для обоих .box__faces - front и .box__faces - back будет переведено, и я поместил переход на родительский элемент, который в этом случае является .box__faces .

transition: all 0.8s ease;    // this doesn't seem to be applied.

Спасибо.

Answer 1

Вы установили transition для класса .box__faces, когда вам нужно указать его для классов &--front и &--back.

.box
{
  width: 500px;
  height: 500px;
  background: #eee;

  &__faces
  {

    &--front
    {
      width:150px;
      height:150px;
      background: blue;
      transition: all 0.8s ease;
    }

    &--back
    {
      width:150px;
      height:150px;
      background: red;
      transform: rotateY(180deg);
      transition: all 0.8s ease;
    }
  }

  &__faces:hover &__faces--front
  {
    transform: rotateY(180deg);
  }
  &__faces:hover &__faces--back
  {
    transform: rotateY(0deg);
  }
}