使用 css 个动画淡出一个跨度会留下 space

Question

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

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

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

不幸的是，我的问题是，我在 React 中。名义上它自己解决了这个问题，正如我在这里发现的：

但我似乎发现了一些奇怪的错误，该错误与该死的白色 space 行为不一致（例如，请参见代码段）。我想我得去 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>

Answer 1

请将您的代码修改为：

<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>

Answer 2

我试了一下，想出了这个解决方案 _

在'Animated text'

动画文字前加class.negateMargin+ 

看起来好像剃掉了 "kinda ugly" 额外的白色-space _

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>

Answer 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 可以解决问题，但我必须 fiddle 处理动画，使其看起来和原来一样漂亮。

使用 css 个动画淡出一个跨度会留下 space

Fading out a span with css animations leaves space

css

reactjs

css-animations

opacity

letter-spacing