Как использовать Vue JS переход "внутри" другого перехода? - PullRequest
Новая
       37

Как использовать Vue JS переход "внутри" другого перехода?

0 голосов
/ 04 января 2019

Скажем, у меня нормальный переход, который прекрасно работает (следуя документам Vue).Но я хотел бы иметь другой переход ВНУТРИ этого.

Так, например, элемент скользит в , но затем текст в этом постепенно исчезает в то же самоевремя?

Я не могу получить внутренний дочерний переход к анимации.Это не увольняют?Я попытался «появиться» и думал, что узел новый.

Там практически нет информации об этом.

<div id="demo">
  <transition name="slide">
    <div v-if="show">
      <transition name="slide-fade">
        <p>hello</p>
      </transition>
    </div>
  </transition>
</div>

Эффекты перехода 

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

1 Ответ

0 голосов
/ 04 января 2019

Похоже, вы не добавили CSS перехода для компонента slide.Должно работать следующее: 

const vm = new Vue({
  el: '#demo',
  data() {
    return {
      show: true
    }
  }
})
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: opacity 0.5s;
}

.slide-fade-enter,
.slide-fade-leave-to {
  opacity: 0;
}

.slide-enter-active {
  transition: all 0.3s ease;
}

.slide-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-enter,
.slide-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

/* Some styling to make them noticeable */
.parent {
  background-color: lightgray;
  padding: 2px;
}

.child {
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="demo">
  <transition name="slide">
    <div v-if="show" class="parent">
      <transition name="slide-fade">
        <p class="child">hello</p>
      </transition>
    </div>
  </transition>

  <button @click="show = !show">Toggle</button>
</div>
...