html - 悬停缩写时的 CSS 转换

Question

我正在尝试使用 HTML 和 CSS，但就是不知道如何去做。 假设我有一个缩写“AW”，代表“Abcd-Wxyz”。我想要一个从第一个字母开始滚动单词其余部分的动画。

我测试了位置、显示、可见性和过渡，但它们都不起作用。为了使 CSS 过渡正常工作，我需要调整容器的宽度。任何想法如何以正确的方式做到这一点？

<header><h1>Some Heading - <span id="zk-trigger">A<span id="hide1" class="hide">bcd-</span>W<span id="hide2"  class="hide">xyz</span></span> | Anything Else</h1></header>

我用这样的东西测试过。它可以工作，但没有任何类型的动画..:/

header {
    height: $generalHeight;
    box-shadow: 2px 2px 2px #ccc;

    h1, span {
        font-size: 35px;
        line-height: $generalHeight;
        width: 960px;
        margin: 0 auto;
        font-weight: 400;
        letter-spacing: 2px;


    }
    span {
        color: #ff900f;
    }
    span#zk-trigger {
        span.hide {
            position: absolute;
            width: 0px;
            overflow: hidden;
            visibility: hidden;
        }
    }
    span#zk-trigger:hover {
        span.hide {
            visibility: visible;
            position: static;
        }
    }
}

Answer 1

你不能仅使用 width 属性来做到这一点，但你可以使用 max-width 来欺骗它(在 0 处，然后当你悬停 zk-trigger 时在 auto 处)。
Here's an exemple .

#hide1, #hide2{
// the base display, using the max-width trick
  display: inline-block;
  max-width: 0;
  opacity: 0;
  transition: max-width 0.2s, opacity 0.2s;
}

#zk-trigger:hover #hide1, #zk-trigger:hover #hide2{
// apply the code to #hide1 and #hide2 when #zk-trigger is hovered
  max-width: 100px;
  opacity: 1;
  transition: max-width 0.2s, opacity 0.2s;
}