Css 为什么我的转换没有'；在引导vue中，警报v-model不起作用？

所以我是Vue的新手，检查了一些类，现在我学习了转换。我从Vue官方过渡复制粘贴了下面的css代码，但它不起作用！但只有淡出！淡入状态很好。 另一个问题是，由于某种原因，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>

动画！
显示警惕
万宁
{{showart}}
动画片！
导出默认值{
数据（）{
返回{
showAlert：对
}
}
}
梅因先生{
文本对齐：居中；
保证金：自动；
}
。淡入激活状态。淡入保持激活状态{
过渡：不透明度1s；
}
.淡入淡出淡出淡出{
不透明度：0；
}

尝试使用

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>

动画片！

---

选中此项

之所以会发生这种情况，是因为未显示时将从DOM中删除

。因此，这种转变不会持续下去

您可以通过删除

v-model

并使用

v-if

代替，并结合

show

道具来解决此问题

newvue({
el:“#应用程序”，
数据（）{
返回{
showAlert:错误
}
}
})

.fade进入活动状态，.fade离开活动状态{
过渡：不透明度1s；
}
.淡入淡出淡出淡出{
不透明度：0；
}

切换警报
动画片！

Ok发现问题！bootstrap不接受v-if，所以如果我把它带到html alert，它就可以工作了。谢谢！这真的很有帮助，因为我想继续使用引导vue进行练习