为啥我的过渡不适用于 Bootstrap-vue 中的警报 v-model？

Posted 2023-02-23

【中文标题】为啥我的过渡不适用于 Bootstrap-vue 中的警报 v-model？

【英文标题】：Why my transition out doesn't work for alert v-model in Bootstrap-vue?为什么我的过渡不适用于 Bootstrap-vue 中的警报 v-model？

【发布时间】：2020-12-01 23:18:29

【问题描述】：

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

【问题讨论】：

好的，问题找到了！ bootstrap 不接受 v-if ，所以如果我把它带到 html alert 它确实有效。

【参考方案1】：

尝试用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

【参考方案2】：

发生这种情况是因为<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/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.16.0/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/bootstrap-vue@2.16.0/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>

【讨论】：

谢谢！这真的很有帮助，因为我想继续使用 bootstrap-vue 进行练习