Vue.js - fade in not working but fade out is working on v-show

Question

I am using v-show and a transition element per the documentation here:

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

The fade out is animating correctly - meaning when I toggle the visibility of the element, it animates nicely on the way out but when it becomes visible it does not work.

Here is one of the elements I am trying to toggle in my form:

<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>

I am using asp-for tags because the back end is in ASP.Net.

And here is my Vue.js app which is mounted to the create-form element:

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");

I am adding both files at the top of my page like such:

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

The CSS classes are defined in my css file like this:

/*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;
}

I can see the slide-fade-enter-active and slide-fade-enter classes being applied to my element as I toggle it but unfortunately it just pops up immediately without fading in.

Any input is appreciated. I'm sure I'm missing something here but I don't know exactly what it is.

Answer 1

Per User 28's comments, I resolved it with the following change to my CSS:

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

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

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

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