style(knowledge): 优化知识详情页面动画效果

- 修改 slide-in 动画,增加淡入淡出效果
- 优化 CSS代码,使用 Webkit 前缀提高兼容性
This commit is contained in:
陈昱达
2025-04-18 17:55:01 +08:00
parent 53b3d06092
commit 44c4d5fa8c

View File

@@ -141,15 +141,17 @@ export default {
animation: slide-in 0.5s reverse;
}
@keyframes slide-in {
//slide-in
// 向左淡入淡出
@-webkit-keyframes slide-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.25);
opacity: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
transform: scale(1);
opacity: 1;
-webkit-transform: translateX(0);
}
}
</style>