我有一個在 Vue2.7 上的專案，并且正在將其移植到 Vue3 和 vite。由于 2.7 中的 compositionAPI 支持，我幾乎復制了確切的代碼。一切都正常渲染，但現在突然間我的過渡影片不再像以前那樣平滑下拉，甚至懸停大小也很奇怪。
我一直試圖找出這里出了什么問題，但我還沒有真正發現我寫的內容與 Vue3 引起的中斷之間有任何差異。
如果有人對為什么這些影片和我的大部分樣式不起作用有任何想法，請告訴我！
干杯
我制作了一個CodeSandbox來編輯所有內容。
下拉選單.vue
<template>
<div>
<div
v-if="kind === 'products'"
@mouseenter="open = true"
@mouseleave="open = false"
>
<div
style="display: flex"
:
@click="open = !open"
>
<p >Products</p>
<svg
:
style="width: 13px; margin-left: 6px"
xmlns="http://www.w3.org/2000/svg"
width="11.677"
height="6.676"
viewBox="0 0 11.677 6.676"
>
<path
d="M4.663,5.837.245,1.422A.835.835,0,0,1,1.427.244l5.006,5A.833.833,0,0,1,6.457,6.4L1.43,11.434A.835.835,0,0,1,.249,10.255Z"
transform="translate(11.677) rotate(90)"
fill="#7897fd"
/>
</svg>
</div>
<Transition name="slide">
<div v-if="open" :>
<a href="#" > Option2 </a>
<a href="#"> Option1 </a>
</div>
</Transition>
</div>
<div
v-if="kind === 'resources'"
@mouseenter="open = true"
@mouseleave="open = false"
>
<div
style="display: flex"
:
@click="open = !open"
>
<p >Resources</p>
<svg
:
style="width: 13px; margin-left: 6px"
xmlns="http://www.w3.org/2000/svg"
width="11.677"
height="6.676"
viewBox="0 0 11.677 6.676"
>
<path
d="M4.663,5.837.245,1.422A.835.835,0,0,1,1.427.244l5.006,5A.833.833,0,0,1,6.457,6.4L1.43,11.434A.835.835,0,0,1,.249,10.255Z"
transform="translate(11.677) rotate(90)"
fill="#7897fd"
/>
</svg>
</div>
<Transition name="slide">
<div v-if="open" :>
<a href="https://google.com/" target="_blank">E-Learning</a>
<a href="#">FAQ</a>
</div>
</Transition>
</div>
</div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
props: {
/**
* @example
* "products" | "resources"
*/
kind: { type: String, default: "products" },
sidebar: { type: Boolean, default: false },
},
setup(props) {
const open = ref(false);
return {
open,
};
},
});
</script>
<style lang="sass" scoped>
p
all: unset
._custom-select
position: relative
text-align: left
outline: none
font-size: 1rem
text-decoration: none
._dropdown-title
display: flex
justify-content: center
align-items: center
// font-size: 20px
font-weight: bold
color: #fff
padding: 0.25em 2em
cursor: pointer
user-select: none
._items
position: absolute
background-color: #0D1F5D
left: 0
right: 0
top: 100%
display: flex
flex-direction: column
justify-content: center
align-items: center
color: #fff
z-index: 1
& a
color: #fff
text-decoration: none
width: 100%
// font-size: 1.25rem
font-weight: bold
text-align: center
padding: 0.75em 1em
cursor: pointer
user-select: none
&:hover
background-color: #2A3A72
._transparent
background-color: transparent
._product-icon
width: 100%
// height: 27px
._rotate-180
transform: rotate(180deg)
transition: 0.3s linear
.slide-enter-active
-moz-transition-duration: 0.3s
-webkit-transition-duration: 0.3s
-o-transition-duration: 0.3s
transition-duration: 0.3s
-moz-transition-timing-function: ease-in-out
-webkit-transition-timing-function: ease-in-out
-o-transition-timing-function: ease-in-out
transition-timing-function: ease-in-out
.slide-leave-active
-moz-transition-duration: 0.3s
-webkit-transition-duration: 0.3s
-o-transition-duration: 0.3s
transition-duration: 0.3s
-moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1)
-webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1)
-o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1)
transition-timing-function: cubic-bezier(0, 1, 0.5, 1)
.slide-enter-to,
.slide-leave
max-height: 100px
overflow: hidden
.slide-enter,
.slide-leave-to
overflow: hidden
max-height: 0
</style>
導航欄.vue
<script>
import { defineComponent, ref, onMounted } from "vue";
import DropdownMenu from "./DropdownMenu.vue";
import HamburgerMenu from "./HamburgerMenu.vue";
export default defineComponent({
components: { DropdownMenu, HamburgerMenu },
setup() {
// const scrolledNav = ref(null)
const mobile = ref(false);
const mobileNav = ref(false);
const windowWidth = ref(null);
function toggleMobileNav() {
mobileNav.value = !mobileNav.value;
}
function checkScreen() {
windowWidth.value = window.innerWidth;
if (windowWidth.value <= 850) {
mobile.value = true;
return;
}
mobile.value = false;
mobileNav.value = false;
return;
}
onMounted(() => {
window.addEventListener("resize", checkScreen);
checkScreen();
});
function contactClicked() {
console.log("contact clicked");
}
return {
mobile,
mobileNav,
windowWidth,
toggleMobileNav,
checkScreen,
contactClicked,
};
},
});
</script>
<template>
<div >
<nav>
<div >
<a href="/"> IMAGE </a>
<div >
<HamburgerMenu
:open="mobileNav"
@click="toggleMobileNav"
v-show="mobile"
/>
</div>
<div v-show="!mobile" >
<DropdownMenu kind="products" />
<DropdownMenu kind="resources" />
<a href="about" >About Us</a>
</div>
<div v-show="!mobile" >
<a href="/contact" @click="contactClicked">
Contact Us</a
>
<a href="signIn" > Sign In</a>
</div>
</div>
<div >
<div
@click="mobileNav = false"
v-if="mobileNav"
></div>
<transition name="slide">
<div v-if="mobileNav" >
<DropdownMenu :sidebar="true" kind="products" />
<DropdownMenu :sidebar="true" kind="resources" />
<a href="about" >About Us</a>
<div >
<a href="/contact" > Contact Us</a>
<a href="signIn" > Sign In</a>
</div>
</div>
</transition>
</div>
</nav>
</div>
</template>
<style lang="sass" scoped>
._nav
position: fixed
top: 0
left: 0
width: 100%
color: #fff
background-color: #0D1F5D
transition: 500ms ease all
z-index: 99
&-header
display: flex
justify-content: space-between
align-items: center
width: 100%
margin: 1em 0
nav
position: relative
display: flex
height: 5.5vh
min-height: 64px
transition: 500ms ease all
margin: 0 auto
@media(min-width: 1648px)
max-width: 1648px
._nav-inner
display: flex
justify-content: center
align-items: center
flex: 1
._logo
display: flex
justify-content: center
align-items: center
height: 100%
min-height: 26px
._about
text-decoration: none
font-weight: bold
color: #fff
._sign-in-button
text-decoration: none
display: flex
justify-content: center
align-items: center
width: max-content
// height: 100%
text-align: center
/* font-size: 1rem */
font-weight: bold
color: #fff
background-color: #962326
border: none
border-radius: 8px
box-shadow: none
padding: 6px 26px
transition: 0.3s ease
&:hover
background-color: #b32a2d
._contact-button
text-decoration: none
display: flex
justify-content: center
align-items: center
box-sizing: border-box
width: max-content
height: 100%
text-align: center
/* font-size: 1rem */
font-weight: bold
color: #fff
background-color: transparent
outline: 2px #fff solid
border-radius: 8px
padding: 4px 16px
transition: 0.3s ease
&:hover
background-color: #fff
color: #0D1F5D
._icon
display: flex
align-items: center
height: 100%
z-index: 99
._sidebar
&-backdrop
background-color: rgba(19, 15, 64, .4)
width: 100vw
height: 100vh
position: fixed
top: 0
left: 0
cursor: pointer
&-panel
overflow-y: auto
position: fixed
left: 0
top: 64px
bottom: 0
display: flex
flex-direction: column
justify-content: space-around
align-items: center
background-color: #130f40
width: 50%
// padding: 3em 2em
z-index: 999
._buttons
display: flex
align-items: center
gap: 2em
._buttons-sidebar
display: flex
flex-direction: column
align-items: center
gap: 1em
.slide-enter-active,
.slide-leave-active
transition: transform 0.2s ease
.slide-enter,
.slide-leave-to
transform: translateX(-100%)
transition: all 150ms ease-in 0s
@media only screen and (max-width: 1648px)
nav
padding: 0 4em
</style>
uj5u.com熱心網友回復：
嘗試使用.slide-enter-form代替.slide-enter和.slide-leave-from代替.slide-leave。更多在這里
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/510584.html