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

Fading out a span with css animations leaves space

我想为位于更多文本中间的一些文本制作动画。一切正常,除了淡出的跨度在看起来有点丑陋的地方留下了额外的 space。在动画的 "faded out" 部分设置 display: nonewidth: 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>

请将您的代码修改为:

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

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

在'Animated text'

动画文字前加class.negateMargin+&nbsp;

看起来好像剃掉了 "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>

事实证明,我在问题中提到的问题在这里并没有错,只是看起来像是错了。实际问题在于动画设置的字母间距,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 处理动画,使其看起来和原来一样漂亮。