尝试使用悬停创建显示动画答案

【问题标题】：trying to create a reveal animation with hover尝试使用悬停创建显示动画
【发布时间】：2020-11-19 07:58:17
【问题描述】：

嘿，伙计们，所以我正在尝试创建一个网站，我在第二部分中有这 2 张卡片，我想做的是隐藏，直到我将鼠标悬停在该特定区域上并在我滚动或悬停到时再次消失侧面的不同部分，但我不知道如何隐藏 2 张卡片和渐隐部分，我可以使用特定部分标签上的悬停 css 属性显示它们，但我无法弄清楚其余部分

这是 HTML，因为您可以在这里看到 2 个 div，然后当我将鼠标悬停在此部分上并淡出并在其他任何地方保持隐藏时，我希望它们显示出来

 <section class="cards">
    <div class="cards-container margin-top-1">
      <div class="cards-design-1 margin-right-10 margin-top-inner-elements cards-animation-1">1</div>
      <div class="cards-design-2 margin-right-10 margin-top-inner-elements cards-animation-2">2</div>


    </div>

对于本节的 css，这也是我在底部使用关键帧的方法。 ps 我使用的是 sass 而不是 css，所以只是一个指示。

.cards{
    height: 100vh;
    background-image:linear-gradient(to right, 
    rgba(1, 77, 113, 0.6),
    rgba(1, 77, 113, 0.6)), 
    url(../images/books.jpg);
    background-size: cover;
    background-position: contain;
    position: relative;
    margin: 0 20px 0 20px;
    border-radius: 10px;
    box-shadow: 0 10px 20px 5px;

    &-container{
        display: flex;
        flex-direction: row;
        justify-content: center;
        justify-content: space-around;
    }

    &-design-1{
      height: 70vh;
      width: 40vw;
      background-color: $color-nav-blue;

  }

   &-design-2{
      height: 70vh;
      width: 40vw;
      background-color: $color-white;

    }

&:hover{
  .cards-animation-1{
  animation: slideleft 2s;
  }
}


&:hover{
  .cards-animation-2{
  animation: slideright 2s;
  }
}


 }

【问题讨论】：

你是否创建了slideright和slideleft关键帧动画？
是的，这些动画效果很好，但我不知道如何阻止 2 个 div 最初显示以及当我将鼠标悬停在其他地方时

标签： javascript html jquery css sass

【解决方案1】：

您需要将 div 设置为最初隐藏。我建议不要使用关键帧，因为它们比过渡更难维护。过渡自然也会为您提供反向动画。

    .cards{
    height: 100vh;
    background-image:linear-gradient(to right, 
    rgba(1, 77, 113, 0.6),
    rgba(1, 77, 113, 0.6)), 
    url(../images/books.jpg);
    background-size: cover;
    background-position: contain;
    position: relative;
    margin: 0 20px 0 20px;
    border-radius: 10px;
    box-shadow: 0 10px 20px 5px;

    &-container{
        display: flex;
        flex-direction: row;
        justify-content: center;
        justify-content: space-around;
    }

    &-design-1{
      height: 70vh;
      width: 40vw;
      background-color: $color-nav-blue;
   
  }

   &-design-2{
      height: 70vh;
      width: 40vw;
      background-color: $color-white;

    }
   &-design-1,
   &-design-2 {
    opacity: 0;
    transition: opacity .25s ease-out;`
   }

&:hover{
  .cards-animation-1, 
  .cards-animation-2 {
    opacity: 1; 
    transition: opacity 0.25s ease-in;
  }
}

}

【讨论】：