Question

我一直在尝试制作出现/消失的文字动画。但这是众所周知的动画display属性的问题。

我尝试使用opacity和position，但仍然没有运气。我不想仅以一种方式为此设置动画，我只是想隐藏一个文本并用箭头动画显示另一个文本。但是，如果有可能以另一种方式实现这种转变，例如翻转，淡入淡出等等。

这是我的代码

HTML

<div class="wrapper">
  <nav class="series-navigation">
    <div class="series-navigation__container">
      <div class="series-navigation__direction series-navigation__direction--previous">
        <div class="series-navigation-item series-navigation-item--previous">
          <a href="#" class="series-navigation-item__link">
            <span class="sop-arrow-left series-navigation-item__icon series-navigation-item__icon--previous"></span>
            <span class="series-navigation-item__title series-navigation-item__title--part">Part 1 </span>
            <span class="series-navigation-item__title series-navigation-item__title--name">Article name of Part 1</span>
          </a>
        </div>
      </div>
      <div class="series-navigation__divider"></div>
      <div class="series-navigation__direction series-navigation__direction--next">
        <div class="series-navigation-item series-navigation-item--next">
          <a href="#" class="series-navigation-item__link">
            <span class="series-navigation-item__title series-navigation-item__title--part">Part 3</span>
            <span class="series-navigation-item__title series-navigation-item__title--name">Article name of Part 3</span>
            <span class="sop-arrow-right series-navigation-item__icon series-navigation-item__icon--next"></span>
          </a>
        </div>
      </div>
    </div>
  </nav>
</div>

CSS

.sop-arrow-right:before {
  content: ">";
}

.sop-arrow-left:before {
  content: "<";
}

.wrapper {
  margin-top: 1.25em;
  overflow: hidden;
  font-size: 1.25em;
  padding: 1em;
  background-color: #fff;
  border-radius: 5px;
}

.series-navigation-item__link:hover .series-navigation-item__title--part,
.series-navigation-item__title--name {
  visibility: hidden;
  opacity: 0;
  position: absolute;
}

.series-navigation-item__link:hover .series-navigation-item__title--name,
.series-navigation-item__title--part {
  visibility: visible;
  opacity: 1;
  position: relative;
}

.series-navigation {
  text-align: center;
  display: block;
  width: 100%;
}

.series-navigation__container {
  position: relative;
  width: 100%;
}

.series-navigation__divider {
  position: absolute;
  vertical-align: middle;
  display: inline-block;
  height: 100%;
  width: 1px;
  background: #52b3d9;
}

.series-navigation__direction {
  position: relative;
  padding-top: 1.25em;
  padding-bottom: 1.25em;
  vertical-align: middle;
  display: inline-block;
  width: 48%;
}

.series-navigation__direction--next {
  padding-right: 0.25em;
}

.series-navigation__direction--previous {
  padding-left: 0.25em;
}

.series-navigation-item {
  display: block;
  width: 100%;
}

.series-navigation-item__link {
  width: 100%;
}

.series-navigation-item__link:hover .series-navigation-item__icon--next {
  margin-right: -0.625em;
  margin-left: 0.625em;
}

.series-navigation-item__link:hover .series-navigation-item__icon--previous {
  margin-left: -0.625em;
  margin-right: 0.625em;
}

.series-navigation-item__title {
  font-size: 1em !important;
  display: inline-block;
  vertical-align: middle;
  width: 90%;
}

@media only screen and (max-width: 768px) {
  .series-navigation-item__title {
    width: 80%;
    font-size: 0.875em !important;
  }
}

.series-navigation-item__title--part {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.series-navigation-item__title--name {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.series-navigation-item__icon {
  width: 10%;
  vertical-align: middle;
  display: inline-block;
  font-size: 1.4375em !important;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.series-navigation-item--previous {
  padding-left: 0;
  text-align: left;
}

.series-navigation-item--previous .series-navigation-item__title {
  padding-right: 0.625em;
}

.series-navigation-item--next {
  padding-right: 0;
  text-align: right;
}

.series-navigation-item--next .series-navigation-item__title {
  padding-left: 0.625em;
}

现场示例https://jsfiddle.net/CROSP/ebztkwx1/14/

正如您所看到的，动画看起来很丑陋（可能是因为位置属性），此外这在Safari浏览器中无效（无动画）。

如果有任何帮助或建议如何达到预期效果，我将不胜感激。

感谢。

P.S。没有JS＆amp;浏览器功能支持不足。

仅文本更改动画CSS（不显示动画）

0 个答案: