为什么我的过渡对Bootstrap-vue中的警报v模型不起作用？

问题描述

因此，我是Vue的新手，正在检查一些课程，现在我学习了过渡课程。我从Vue官方转换中复制粘贴了下面的CSS代码，这是行不通的，但是仅淡出淡入就可以了。 另一个问题是v模型由于某种原因v-if根本无法工作。

<template>
    <div class="main">
        <h1>Animations!</h1>
        <b-row>
            <b-col>
                <b-button @click="showAlert = !showAlert">Show Alert</b-button>
            </b-col>
            <b-col>
                <b-alert variant="warning" v-model="showAlert" key="1">Wanrning!</b-alert><br>{{ showAlert }}
            </b-col>
            <b-col>
                <transition name="fade" mode="out-in">
                    <b-alert variant="primary" v-model="showAlert" key="2">Animated Wanrning!</b-alert>
                </transition>
            </b-col>
        </b-row>

    </div>
</template>

<script>

    export default {
        data() {
            return {
                showAlert: true
            }
        }
    }
</script>

<style>
    .main{
        text-align: center;
        margin: auto;
    }
    .fade-enter-active,.fade-leave-active {
        transition: opacity 1s;
    }
    .fade-enter,.fade-leave-to {
        opacity: 0;
    }
</style>

解决方法

尝试使用div元素包装警报，并使用v-if有条件地呈现警报：

 <transition name="fade">
          <div v-if="showAlert">
            <b-alert variant="primary" v-model="showAlert" key="2">Animated Wanrning!</b-alert>
          </div>
</transition>

选中此example

,

之所以会这样，是因为<b-alert>在未显示时已从DOM中删除。这样过渡就不会发挥出来。

您可以通过放下v-model并使用v-if并结合show道具来解决此问题。

new Vue({
  el: '#app',data() {
    return {
      showAlert: false
    }
  }
})

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

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>


<div id="app">
  <b-btn @click="showAlert = !showAlert">Toggle Alert</b-btn>
  <transition name="fade" mode="out-in">
    <b-alert variant="primary" show v-if="showAlert">
      Animated Wanrning!
    </b-alert>
  </transition>
</div>