Блог

У меня есть два вложенных перехода, первый из которых работает на верхнем уровне, а «дочерний» — нет.

Когда элемент внутри <transition> тегов соответствует условию исчезновения, .product-image-sub-wrapper элемент правильно получает add-to-cart-translate-leave-active класс. Однако <img> элемент не получает .add-to-cart-scale-leave-active класс: он вообще не получает никакого класса.

Почему?

Разметка:

 <transition name="add-to-cart-translate">
  <div
    v-if="!toggleRollInto amp;amp; !addedToCart"
    class="product-image-sub-wrapper"
  >
    <transition name="add-to-cart-scale" appear>
      <img
        v-if="!toggleRollInto amp;amp; !addedToCart" 
        :src="product.PhotoUrl"
      />
    </transition>
  </div>
</transition>
 

CSS:

 .product-image-wrapper {
  position: relative;
  width: 100%;
  height: 325px;

  .product-image-sub-wrapper {
    width: 100%;
    height: 325px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;

    img {
      max-width: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1000;
      display: block;
    }
  }
}

.add-to-cart-translate-leave-active {
  animation: add-to-card-translate 1.35s;
}

@keyframes add-to-card-translate {
  30% {
    transform: translate(0, -30px);
    opacity: 1;
  }
  100% {
    transform: translate(0, calc(100vh - 190px));
    opacity: 0;
  }
}

.add-to-cart-scale-leave-active {
  animation: add-to-card-scale 1.35s;
}

@keyframes add-to-card-scale {
  30% {
    transform: scale(1.05);
    transform-origin: top left;
  }
  100% {
    transform: scale(0.2);
    transform-origin: left;
  }
}