CSS 缓和进出比例

Question

我正在尝试放置动画以在悬停时缩放 Angular 垫卡。

我让它缩放并进行了缓入过渡。

但我似乎无法在完成悬停后让它放松。卡片会立即恢复到原来的大小。

任何人都可以指出我所缺少的东西吗？

这是我目前在 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 Transition - eases in but doesn't ease out?我将我的代码更改为:

.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;
  }
}

问题是您试图将 ease-out 放在 mat-card 的 :after 上，这基本上什么都不做，因为 :after 选择器是针对特定 HTML 标记中的内容。

希望这对您有所帮助!