根据这里的文档，我正在使用v-show和一个转换元素：
https://v2.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作为标签，因为后端在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;
}
当我切换时，我可以看到幻灯片淡入淡出进入活动状态，幻灯片淡入淡入淡出类被应用到我的元素，但不幸的是，它只是立即弹出而没有淡入。
欢迎提供任何意见。我确信我在这里遗漏了一些东西，但我不知道它到底是什么。
根据用户28的评论，我通过对我的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;
}