CSS 简化了进出缩放

Question

我试图在悬停时放置一个动画来缩放角度垫卡。

我让它扩展并进行轻松过渡。

但是在完成悬停后，我似乎无法让它放松下来。该卡会立即恢复到其原始大小。

谁能指出我错过了什么？

这是我到目前为止src/app/styles.scss的 SCSS：

.mat-card {
color: white;
background-color: #2f3441;
opacity: .70;
border-radius: 10px;
&:hover {
transition: all 300ms ease-in;
transform: scale(1.02);
opacity: 1;
border-radius: 10px;
}
&:hover::after {
transition: all 300ms ease-out;
}
}

我尝试将缓和放在.mat-card内，但也没有任何效果。

更新：

在这里的帖子之后 CSS 过渡 - 缓和但不缓和？我将代码更改为：

.mat-card {
color: white;
background-color: #2f3441;
opacity: .70;
transition: all 300ms ease-in-out;
}
.mat-card:hover {
transform: scale(1.02);
opacity: 1;
}

我原始帖子的 CSS 在我的styles.scss文件中，因为我希望它应用于应用程序中的所有卡片，但执行上述操作使过渡效果完全停止工作。

直到我将 css 移动到组件 .scss 文件本身中，它才终于开始转换。src/app/pages/mycomponent/mycomponent.scss

那么，为什么过渡在添加到我的应用程序全局styles.scss文件时不起作用，但在专门添加到组件时起作用？

Answer 1

很抱歉提交答案而不是发表评论，只是我还没有足够的声誉。

您的 SCSS 应如下所示：

.mat-card {
color: white;
background-color: #2f3441;
opacity: .70;
border-radius: 10px;
transition: all 300ms ease-out;
&:hover {
transition: all 300ms ease-in;
transform: scale(1.02);
opacity: 1;
border-radius: 10px;
}
}

问题是您正在尝试将缓和放在垫卡的 ：after 上，这基本上什么也不做，因为 ：after 选择器用于该特定 HTML 标签中的内容。

希望这有帮助！