时间戳

首页 > 解决方案 > CSS 缓进出规模

css - CSS 缓进出规模

问题描述

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

我让它缩放并进行轻松过渡。

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

谁能指点我缺少的东西？

这是我到目前为止的 SCSS src/app/styles.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文件时不起作用，但在专门添加到组件时起作用？

标签： csssasscss-transitions

解决方案

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

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

问题是你试图在你的 mat-card 的 :after 上放轻松，这基本上不会做任何事情，因为 :after 选择器用于该特定 HTML 标记中的内容。

希望这可以帮助！

推荐阅读