在两个图像之间切换过渡

Question

我有一个包含两个图像的div元素。使用CSS :hover，我切换两个图像(FontAwesome图标)的显示。

<div class="alternating-content-item-content alternating-content-item__content col-md-6">
  <div class="alternating-content-item-content__padding">
    <h3 class="alternating-content-item-content__heading">Trading</h3>
    <p class="alternating-content-item-content__blurb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <a href="http://www.google.com" target="_blank" class="alternating-content-item-content__link">
      Read More
      <i class="fa fa-chevron-right fa-hover-hidden read-more-icon"></i>
      <i class="fa fa-arrow-right fa-hover-show read-more-icon"></i>
    </a>
  </div>
</div>

我的CSS是

.fa.fa-hover-show {
    display: none;
}

&:hover {
    .fa.fa-hover-hidden {
        display: none;
    }

    .fa.fa-hover-show {
        display: inline-block;
    }
}

如何将过渡/变换添加到div hover事件，以便在两个fa图标之间制作平滑的动画？

Answer 1

如果你想要一个平滑的动画，你应该使用opacity。例如：

button {
    transition: opacity 0.5s linear;
}

.fa.fa-hover-show {
    opacity: 0
}

button:hover {
    .fa.fa-hover-hidden {
        opacity: 0
    }

    .fa.fa-hover-show {
        opacity: 1
    }
}