vue.js - Vue.js - 淡入不工作，但淡出正在工作 v-show

问题描述

我在这里的文档中使用 v-show 和一个过渡元素：

https://vuejs.org/v2/guide/transitions.html

淡出动画正确 - 这意味着当我切换元素的可见性时，它在退出时很好地动画，但是当它变得可见时它不起作用。

这是我试图在我的表单中切换的元素之一：

<transition name="slide-fade">
            <div class="form-group" id="call-back-other" v-show="ShowPreferredCallBackTimeOther">
                <label class="control-label">Preferred Call Back Time - Other (Please Specify)</label>
                <input asp-for="Referral.ReferrerPreferredCallBackTimeOther" class="form-control required" type="text" />
                <span asp-validation-for="Referral.ReferrerPreferredCallBackTimeOther" class="text-danger"></span>
            </div>
        </transition>

我正在使用 asp-for 标记，因为后端位于 ASP.Net 中。

这是我的 Vue.js 应用程序，它安装到 create-form 元素：

const app = Vue.createApp({
    data() {
        return {
            ShowOtherInquiryReason: false,
            ShowHealthcareProviderFields: false,
            ShowCaregiverFields: false,
            ShowHomeFields: false,
            ShowPreferredCallBackTimeOther: false,
            IsPhysician : false,
            IsUserLoggedIn : false,
            IsHealthCareProvider: "",
            InquiryReason: "",
            ClinicalSelected : false
        }
    },
    methods: {
        SetShowOtherInquiryReason: function (e) {
            if (e.target.selectedOptions[0].innerText === "Other - Please Specify") {
                this.ShowOtherInquiryReason = true;
            } else {
                this.ShowOtherInquiryReason = false;
            }
            console.log(this.sectionHidden);
        },
        SetShowHealthcareProviderFields: function (e) {
            if (e.target.value === "Yes") {
                this.ShowHealthcareProviderFields = true;
            } else {
                this.ShowHealthcareProviderFields = false;
            }
            this.ClinicalSelected = true;
        },
        SetShowCaregiverFields: function (e) {
            if (e.target.value === "Yes") {
                this.ShowCaregiverFields = true;
            } else {
                this.ShowCaregiverFields = false;
            }
        },
        SetShowHomeFields: function (e) {
            if (e.target.selectedOptions[0].innerText === "Home") {
                this.ShowHomeFields = true;
            } else {
                this.ShowHomeFields = false;
            }
        },
        SetShowPreferredCallBackTimeOther: function (e) {
            if (e.target.selectedOptions[0].innerText === "Other (enter a specific time)") {
                this.ShowPreferredCallBackTimeOther = true;
            } else {
                this.ShowPreferredCallBackTimeOther = false;
            }
        },
        IsNumericInput: function (event) {
            const key = event.keyCode;
            return ((key >= 48 && key <= 57) || // Allow number line
                (key >= 96 && key <= 105) // Allow number pad
            );
        },
        IsModifierKey: function (event) {
            const key = event.keyCode;
            return (event.shiftKey === true || key === 35 || key === 36) || // Allow Shift, Home, End
                (key === 8 || key === 9 || key === 13 || key === 46) || // Allow Backspace, Tab, Enter, Delete
                (key > 36 && key < 41) || // Allow left, up, right, down
                (
                    // Allow Ctrl/Command + A,C,V,X,Z
                    (event.ctrlKey === true || event.metaKey === true) &&
                    (key === 65 || key === 67 || key === 86 || key === 88 || key === 90)
                );
        },
        EnforceFormat: function (event) {
            if (!this.IsNumericInput(event) && !this.IsModifierKey(event)) {
                event.preventDefault();
            }
        },
        FormatToPhone: function (event) {
            if (this.IsModifierKey(event)) { return; }

            const input = event.target.value.replace(/\D/g, '').substring(0, 10); // First ten digits of input only
            const areaCode = input.substring(0, 3);
            const middle = input.substring(3, 6);
            const last = input.substring(6, 10);

            if (input.length > 6) { event.target.value = `(${areaCode}) ${middle} - ${last}`; }
            else if (input.length > 3) { event.target.value = `(${areaCode}) ${middle}`; }
            else if (input.length > 0) { event.target.value = `(${areaCode}`; }
        }
    },
    mounted() {

    },
    computed: {
        
    }

}).mount("#create-form");

我在页面顶部添加这两个文件，如下所示：

<script src="https://unpkg.com/vue@next" defer></script>
<script type="module" src="/js/createreferral.js" defer></script>

CSS 类在我的 css 文件中定义，如下所示：

/*Vue JS CSS Components*/
.slide-fade-enter-active {
    transition: opacity 0.5s ease;
}

.slide-fade-enter-from {
    transition: opacity 0.5s ease;
}

.slide-fade-leave-active {
    transition: opacity 0.5s ease;
}

.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
}

当我切换它时，我可以看到 slide-fade-enter-active 和 slide-fade-enter 类被应用于我的元素，但不幸的是它只是立即弹出而没有淡入。

任何输入表示赞赏。我确定我在这里遗漏了一些东西，但我不知道它到底是什么。

标签： vue.jsvuejs3

vue.js - Vue.js - 淡入不工作，但淡出正在工作 v-show

问题描述

解决方案

推荐阅读