愚蠢的问题。转换效果的转换未应用

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>

萨斯

.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

我希望.box__faces-front和.box__faces-back的rotateY转换都要转换，并且我将转换放在父元素上，在本例中是.box__faces。

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

多谢了。

Answer 1

当您需要在&--front和&--back类上指定transition时，您已经在.box__faces类上设置了transition。

.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);
  }
}