如何在 SASS 中应用过渡？答案

【问题标题】：How to apply transition in SASS?如何在 SASS 中应用过渡？
【发布时间】：2021-06-20 19:46:22
【问题描述】：

当指针悬停在它上面时，过渡效果起作用。但当鼠标指针移开时，它会恢复到原始大小。一世希望 cardLink 平滑缩放到 0.95，然后平滑缩放恢复正常大小。我正在使用 React 和 Sass

.homepage{
        &__cardLink {
            transition: transform .9s linear; 
            text-decoration: none;
            
            @include tablet {
              height: 100%;
            }
        
            :hover {
              box-shadow: 1px 2px 9px 7px #8e8d8a;
              transform: scale(0.95);
              transition: .75s;
             
            }
          }
        }

【问题讨论】：

你想悬停哪个元素？根据homepage__cardLink内的这个<element class="homepage__cardLink"> … <element :hover>元素，将被悬停
@shubham 谢谢！现在这很有意义。如果将悬停应用于（不应用于）homepage__cardLink 中的元素，则应将转换（用于指针移动时）应用于 homepage__cardLink 中的元素。这行得通！

标签： css reactjs animation css-transitions scale

【解决方案1】：

也将变换添加到初始类！

.homepage {
  &__cardLink {
    transition: transform .9s linear; 
    transform: scale(1);
    text-decoration: none;
    
    @include tablet {
      height: 100%;
    }

    :hover {
      box-shadow: 1px 2px 9px 7px #8e8d8a;
      transform: scale(0.95);
    }
  }
}

【讨论】：