VueJS - Есть ли способ условно применить переход? - PullRequest
Новая
       25

VueJS - Есть ли способ условно применить переход?

3 голосов
/ 21 октября 2019

То, что я хотел бы сделать, это создать компонент окна оповещения с настраиваемым переходом показа, который является необязательным, что-то вроде этого (отредактировано для краткости): 

<template>
    <transition v-if="withTransition">
        <b-alert v-bind="this.$attrs" />
    </transition>
</template>

У меня будет withTransition пропв идеале это будет условно отображать только эффект перехода и не будет влиять на отображение окна оповещений.

v-if и v-show не будут работать, поскольку эти свойства также будут отображать и скрывать компонент оповещения. Кроме того, AFAIK <transition> не отображается как элемент DOM, поэтому я не уверен, как это можно сделать условно, если оно вообще есть.

Есть предложения?

1 Ответ

1 голос
/ 21 октября 2019

Вы можете использовать динамические переходы и привязывать к имени перехода (используя вычисляемое свойство), которое ничего не делает, если вы хотите отключить эффект.

Например ... 

new Vue({
  el: '#app',
  data: () => ({ withTransition: true, show: false }),
  computed: {
    computedTransition () {
      return this.withTransition && 'fade'
    }
  }
})
.alert {
  background-color: #f99;
  border: 1px solid #f66;
  padding: 1rem;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

<div id="app">
  <p>
    <label>
      With transition:
      <input type="checkbox" v-model="withTransition"/>
    </label>
  </p>
  <p><button type="button" @click="show = !show">Toggle alert</button></p>
  <transition :name="computedTransition">
    <p class="alert" v-if="show">Something happened</p>
  </transition>
</div>
...