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

我试过将 ease-out 放在 .mat-card 中，但这也没有任何效果。

更新：

在 post 之后 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;
}

我原来的 post 的 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 选择器是针对特定 [=19 中的内容=] 标签。

希望对您有所帮助！

CSS 缓和进出比例

CSS ease in-out scale

css

sass

css-transitions