我CSS移出的时候会闪烁一下有什么办法可以解决吗 以下是我的代码

<template>

  <div :class="{ 'has-logo': showLogo }">

    <logo v-if="showLogo" :collapse="isCollapse" />

    <el-scrollbar wrap-class="scrollbar-wrapper">

      <el-menu :default-active="activeMenu" :collapse="isCollapse" :unique-opened="false" text-color="#9C9C9C"

        active-text-color="#fff" :collapse-transition="false" mode="vertical"  >

       

        <sidebar-item style="" class="sidebarItem" v-for="route in userInfoStore.menuRoutes" :key="route.path" :item="route" :base-path="route.path"

          @click="changecolor($event)"   />

      </el-menu>

    </el-scrollbar>

    <hamburger :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

  </div>

</template>

<script lang="ts">

export default {

  name: 'Sidebar'

}

</script>

<script lang="ts" setup>

import { computed, ref,} from 'vue'

import { useRoute } from 'vue-router'

import Logo from './Logo.vue'

import SidebarItem from './SidebarItem.vue'

import { useAppStore } from '@/stores/app'

import { useUserInfoStore } from '@/stores/userInfo'

import { useSettingsStore } from '@/stores/settings'

import Hamburger from '@/components/Hamburger/index.vue'

const route = useRoute()

const settingsStore = useSettingsStore()

const appStore = useAppStore()

const userInfoStore = useUserInfoStore()

const activeMenu = computed(() => {

  const { meta, path } = route

  if (meta.activeMenu) {

    return meta.activeMenu as string

  }

  return path

})

const showLogo = computed(() => settingsStore.sidebarLogo)

const isCollapse = computed(() => !appStore.sidebar.opened)

let color = ref(true)

// 点击当前字体设置当前字体的颜色

const changecolor = ($event: any) => {

  // console.log(userInfoStore.menuRoutes)

  // userInfoStore.menuRoutes.forEach(item => {

  //   console.log(item.meta?.color,'====')

  //   if(item.meta?.color !== undefined){

  //     $event.target.style.backgroundColor = ''

  //     console.log(888)

  //   }else{

  //   }

  // })

  // $event.target.style.backgroundColor = 'red'

}

const toggleSideBar = () => {

  appStore.toggleSidebar()

}

</script>

<style lang="scss" scoped>

#app .sidebar-container {

  background-color: #000000;

}

:deep(.el-sub-menu__title) {

  background-color: #000000 !important;

}

:deep(.el-menu-item){

  background-color: #000000;

}

:deep(.is-active){

  background-color: #F89027;

}

:deep(.hamburger){

  background-color: #242424;

}

// 划入时候显示的颜色

.hamburger-container {

  position: relative;

  width: 100%;

  background: #242424;

  line-height: 48px;

  float: left;

  cursor: pointer;

  transition: background .3s;

  -webkit-tap-highlight-color: transparent;

  &:hover {

    background: rgba(0, 0, 0, .025)

  }

}

:deep(.el-menu-item:hover){

    outline: 0 !important;

    color: #FFFFFF !important;

    background: linear-gradient(#F89027 0%, #F89027 0%) ;

}

</style>