Vue transition and transition-group don't work

[nurgeldiserikbay]

Block animation doesn't work

in componente

in scss file
.slidetop-move,
.slidetop-enter-active,
.slidetop-enter-active {
transition: all 0.5s ease-out;
}

.slidetop-enter-from,
.slidetop-enter-to {
opacity: 0;
transform: translateY(-100px);
}

package.json
"dependencies": {
"axios": "^1.7.7",
"leaflet": "^1.9.4",
"pinia": "^2.2.6",
"pinia-plugin-persistedstate": "^4.1.3",
"swiper": "^11.1.15",
"vue": "^3.5.12",
"vue-i18n": "^10.0.4",
"vue-router": "4"
},
"devDependencies": {
"@playwright/test": "^1.48.2",
"@tsconfig/node22": "^22.0.0",
"@types/jsdom": "^21.1.7",
"@types/leaflet": "^1.9.14",
"@types/node": "^22.9.0",
"@vitejs/plugin-vue": "^5.1.4",
"@vitest/eslint-plugin": "1.1.7",
"@vue/eslint-config-prettier": "^10.1.0",
"@vue/eslint-config-typescript": "^14.1.3",
"@vue/test-utils": "^2.4.6",
"@vue/tsconfig": "^0.5.1",
"autoprefixer": "^10.4.20",
"eslint": "^9.14.0",
"eslint-plugin-playwright": "^2.0.0",
"eslint-plugin-vue": "^9.30.0",
"jsdom": "^25.0.1",
"npm-run-all2": "^7.0.1",
"postcss": "^8.4.49",
"prettier": "^3.3.3",
"sass": "^1.81.0",
"tailwindcss": "^3.4.15",
"typescript": "~5.6.3",
"vite": "^5.4.10",
"vite-plugin-vue-devtools": "^7.5.4",
"vite-svg-loader": "^5.1.0",
"vitest": "^2.1.4",
"vue-tsc": "^2.1.10"
}