CSS 是否可以仅使用 CSS3 转换文本对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18235764/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to transition text-alignment using CSS3 only?
提问by Adam Soffer
Is it possible to transition text-alignment using css3? For example, I'd like to animate text-alignment from left to right, however, adding a transition property on text-align doesn't do the trick.
是否可以使用 css3 转换文本对齐？例如，我想从左到右为文本对齐设置动画，但是，在 text-align 上添加过渡属性并不能解决问题。
回答by Christoph Bühler
I found out a way of not only animating from left to right / right to left, but also from centered text.
我找到了一种不仅可以从左到右/从右到左制作动画的方法，还可以从居中的文本中制作动画。
The trick is to apply a width of '0'.
诀窍是应用“0”的宽度。
ul {
background: #fff;
padding: 16px;
border: 1px solid #e2e2e2;
}
li {
list-style: none;
letter-spacing: 1px;
font: 12px 'Tahoma';
line-height: 24px;
color: #444;
text-align: center;
white-space: nowrap;
width: 100%;
transition: width .8s ease;
}
ul:hover > li {
width: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>this</li>
<li>is a list</li>
<li>of entries</li>
<li>with various widths.</li>
<li>hover over it</li>
<li>to apply crazy css magic!</li>
</ul>
</body>
</html>回答by dc5
If I understand what you are going for, one way to do this is to change your layout a bit and animate left/right properties:
如果我理解你的意图，一种方法是稍微改变你的布局并为左/右属性设置动画：
This takes advantage of overflow being visible by setting the rightof the spanelement to the left hand side of the screen.
此利用溢出是通过设置可见的right所述的span元件，以在屏幕的左手侧。
On hover, rightis set to 0, transitioning the element across the screen.
在悬停时，right设置为0，在屏幕上过渡元素。
Note: in this case, when transitioning back to the left, you do lose a bit of the easing as it is transitioning all the way to zero rather than the natural width of the text.
注意：在这种情况下，当向左过渡时，你确实失去了一点缓动，因为它一直过渡到零而不是文本的自然宽度。
.bg {
background: black;
width: 100%;
height: 20px;
position: relative;
}
.name {
color: white;
left: 0;
position: absolute;
text-align: right;
right: 100%;
-webkit-transition-property: all;
-webkit-transition-duration: 2s;
}
.bg:hover .name {
position: absolute;
right: 0;
left: 0;
}<div class="bg">
<span class="name">Adam</span>
</div>回答by Leo Selig
This is an old question but I recently had the same issue and found the answers here unsatisfying for my use case.
这是一个老问题，但我最近遇到了同样的问题，发现这里的答案对我的用例不满意。
The biggest concern I have with the solution from dc5 is that it uses the slow position propertiesfor animation which is bad for transitions as they require re-layouting and are not hardware-accelerated.
我对 dc5 的解决方案最大的担忧是它使用动画的慢速位置属性，这对过渡不利，因为它们需要重新布局并且没有硬件加速。
My solution is solely based on transform: transitionX()and leverages the fact that translate()is always based on the target element's width/height:
我的解决方案完全基于transform: transitionX()并利用translate()始终基于目标元素的宽度/高度的事实：
This is my solution:
这是我的解决方案：
setTimeout(function() {
$('.b').addClass('left');
}, 5000);.b {
transform: translateX(50%);
transition: transform ease-in-out 1000ms;
}
.c {
display: inline-block;
transform: translateX(-50%);
background: green;
transition: transform ease-in-out 1000ms;
}
.b.left,
.b.left .c {
transform: translateX(0%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="b">
<div class="c">CENTERED TEXT</div>
</div>回答by Martin Tale
You can align text to the right and increase the width of the container.
您可以将文本向右对齐并增加容器的宽度。
Here is an example: CodePen
这是一个例子：CodePen
HTML:
HTML：
<div class="bg">
<div class="name">Adam</div>
</div>
CSS:
CSS：
.bg {
background: black;
}
.name {
color: white;
text-align: right;
width: auto;
display: inline-block;
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
}
.bg:hover .name {
width: 100%;
}
回答by Volomike
The way I do it is to simply use text-indent instead of text-align. You have to do trial/error a little to figure out the number of px, rem, em, %, or whatever where you want to move the item via text-indent.
我这样做的方法是简单地使用 text-indent 而不是 text-align。您必须进行一些试验/错误以找出 px、rem、em、% 或任何您想通过文本缩进移动项目的位置的数量。
.tsetup
{
text-indent:0;
transition: text-indent 150ms linear;
}
.tright
{
text-indent:50px; /* adjust me by trial and error */
}
So, I can add the tsetupclass to my element. When I click it, I add the trightclass. When I click it again, I remove the trightclass. It does a nice gradual fade from left to right.
因此，我可以将tsetup类添加到我的元素中。当我单击它时，我添加了tright类。当我再次单击它时，我删除了tright该类。它从左到右逐渐淡出。
I use this technique with the FontAwesome fa-circleicon (content:"\f111";font-family:FontAwesome;)to make a checkbox toggle slider button.
我将此技术与 FontAwesomefa-circle图标(content:"\f111";font-family:FontAwesome;)一起使用来制作复选框切换滑块按钮。
