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>

粗鲁的

.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.

谢谢。

标签： sasstransformtransition

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