sass 问题。未应用变换效果的过渡

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

我希望 .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 class 上指定时，您已在 .box__faces class 上设置了 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);
  }
}

sass 问题。未应用变换效果的过渡

sass question. transition of transform effect not applied

transition

transform

sass