如何过渡居中对齐的动态文本？答案

【问题标题】：How do I transition a centre aligned dynamic text?如何过渡居中对齐的动态文本？
【发布时间】：2016-12-26 11:08:28
【问题描述】：

我有一个居中对齐的文本，由于某些操作而发生变化。我可以在那里进行过渡吗？ (codepen)

HTML：

<div id="container">Lorem ipsum dolor sit amet consectetur adipiscing elit</div>

CSS：

#container {
  width: 400px;
  height: 20px;
  background: #000;
  color: white;
  text-align: center;
}

（上面的codepen是一个动态数据的示例，实际上我的数据正在被react states改变）

编辑：只有文本的最后一部分将前 Lorem ipsum dolor sit amet consectetur adipiscing elit 更改为 Lorem ipsum dolor ...。所以我想显示从左边到中心的缩小文本（因为剩余的文本在被切断时将在左侧）

【问题讨论】：

是的，您可以转换文本。你想实现什么样的转变？您能否将此信息添加到您的问题中，好吗？谢谢。
您可以交叉淡化位于不同 z-index 平面上的几个 div。您将需要考虑去抖动。
您要添加哪个过渡？
过渡是有效果的，你可以用它尝试很多不同的东西。请检查以下两个 URL，您将了解大部分内容。 developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/… ----------------- css-tricks.com/almanac/properties/t/transition
见。如果您尝试直接传输文本，它将无法正常工作。事实上，你必须改变规模，例如0.9 到上一个文本“应该在跨度内”。比这个动画完成后。你可以显示你的新动态文本..

标签： jquery html css reactjs

【解决方案1】：

类似的东西

$("#container div").hover(function() {
  this.innerHTML = "This is some sample dynamic text This is some sample dynamic text This is some sample dynamic text This is some sample dynamic text This is some sample dynamic text This is some sample dynamic text This is some sample dynamic text This is some sample dynamic text This is some sample dynamic text This is some sample dynamic text This is some sample dynamic text";
}, function() {
  this.innerHTML = "This is some sample dynamic text that does nothing This is some sample dynamic text that does nothing This is some sample dynamic text that does nothing";
});

#container {
  height: 20px;
  background: #000;
  color: white;
  text-align: center;
}
#container div {
  width: 400px;
  white-space: nowrap;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  transition: all ease-in-out .9s;
}
#container div:hover {
  width: 100%;
  max-width: 100%;
  white-space: normal;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div>This is some sample dynamic text that does nothing This is some sample dynamic text that does nothing This is some sample dynamic text that does nothing</div>
</div>

【讨论】：

【解决方案2】：

#container:after{
   content:'this is dynamic';
}

或者，在 JavaScript 中：

document.getElementById("container").innerHTML = "Paragraph changed!"

【讨论】：

【解决方案3】：

这是一个只使用CSS的简单过渡，同样你可以有很多你想要的效果.....而不需要使用JS。

#container {
  width: 100%;
  height: 20px;
  background: #000;
  color: white;
  position: relative;
}
#container:hover > .static {
  top: -20px;
}
#container:hover > .dynamic {
  top: 0px;
}
#container .static {
  top: 0px;
}
#container .dynamic {
  top: 20px;
}
#container > div {
  position: absolute;
  left: auto;
  right: auto;
  width: 100%;
  text-align: center;
  transition: all 0.3s linear;
  overflow-y: hidden;
}

<div id="container">
  <div class="static">This is some sample dynamic text that does nothing</div>
  <div class="dynamic">This is some sample dynamic text</div>
</div>

【讨论】：

我更新了问题。基本上，只是末尾的文本被省略号更改。而且我已经提到过简单的悬停不会改变文本。我有一个反应应用程序，其中文本更改是通过一些状态更改来完成的。