使用 CSS 动画淡出跨度会留下空间答案

【问题标题】：Fading out a span with css animations leaves space使用 CSS 动画淡出跨度会留下空间
【发布时间】：2019-12-16 18:34:24
【问题描述】：

我想为一些文本设置动画，它位于更多文本的中间。一切正常，除了淡出的跨度在它看起来有点难看的地方留下了额外的空间。在动画的“淡出”部分设置display: none 或width: 0 没有帮助

编辑：我觉得有义务在第一个答案之后指出：跨度的存在是出于其他样式的原因，只是为了简化示例而删除了额外的绒毛。此外，动画部分中没有空格，因此您可以更清楚地看到我不需要的空格以避免混淆。在现实生活中，一切都更加复杂和美观。

在我发布问题后，我在 HTML 中找到了一些关于该问题的详尽信息：How do I remove the space between inline-block elements? 或off-site。

不幸的是，我的问题是，我在 React 中。名义上它自己解决了这个问题，正如我在这里发现的那样：Remove space between inline-block elements in React

但我似乎发现了一些奇怪的错误，即该死的空白行为不一致（例如，参见 sn-p）。我想我得去 React 报告它。

const MyComponent = () => {
    return (<div>      
      <span>Static text</span>
      <span className="animation">Word</span>
      <span>More static text</span>          
      <br />
      <span>Static text</span>
      <span className="animation">Several Words</span>
      <span>More static text</span>          
    </div>
    );
}
    
  ReactDOM.render(<MyComponent />, document.getElementById('root'));

.animation {
    animation: animation 7s linear infinite both;
}

@keyframes animation {
    0%,
    40%,
    100% {
        letter-spacing: initial;
        display: initial;
        opacity: 1;
    }

    50%,
    90% {
        letter-spacing: -0.5em;
        display: none;
        opacity: 0;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【问题讨论】：

首先，我的跨度是内联的，而不是内联块 --> 两者是一样的

标签： css reactjs css-animations opacity letter-spacing

【解决方案1】：

我玩了一会儿，想出了这个解决方案_

在动画文本中添加一个额外的类.negateMargin + &nbsp; 在短语“动画文本”前面

看起来好像这刮掉了“有点难看”的额外空白_

CSS

.animate {
    animation: animate 7s linear infinite both;
}

.negateMargin { margin-left: -4px;}

@keyframes animate {
    0%,
    40%,
    100% {
        letter-spacing: initial;        
        opacity: 1;
    }

    50%,
    90% {
        letter-spacing: -0.5em;        
        opacity: 0;
    }
}

HTML

<span>Static text </span>
<span class="animate negateMargin">&nbsp;Animated text</span>
<span>More static text</span>

.animate {
    animation: animate 7s linear infinite both;
}

.negateMargin { margin-left: -4px;}

@keyframes animate {
    0%,
    40%,
    100% {
        letter-spacing: initial;        
        opacity: 1;
    }

    50%,
    90% {
        letter-spacing: -0.5em;        
        opacity: 0;
    }
}

<span>Static text </span>
<span class="animate negateMargin">&nbsp;Animated text</span>
<span>More static text</span>

【讨论】：

【解决方案2】：

请将您的代码修改为：

<p>
Static text <span class="animate">Animated text </span>More static text
</p>

或

<span>Static text </span>
<span class="animate">Animated text </span>
<span>More static text</span>

【讨论】：

这是一个简化版。额外的跨度用于着色
嗨，我已经更新了答案。您仍然可以将<span> 用于不同的文本，但请注意每个<span> 的字间距。

【解决方案3】：

事实证明，我在问题中提到的问题在这里没有错，只是看起来它们是错的。实际的问题是动画设置的字母间距，0 不透明度只是让它看起来像是空白。这是一个不透明度较高的演示，因此您可以看到发生了什么：

.styled {
  letter-spacing: -0.5em;
  opacity: 0.1;
}

<span>Static span</span><span class="styled">WWWWW</span><span>Static span</span>
<br/>
<span>Static span</span><span class="styled">iiii</span><span>Static span</span>

将字母间距设置为 -1em 可以解决问题，但我必须摆弄动画，让它看起来和原来一样好。

【讨论】：