javascript 从右到左增加或增加 div 标签宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10214320/
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
Increase or grow a div tag width from right to left
提问by user1118019
So basically what needs to be done is that, at time 0, the width is 0, and time 1, the width should be increased graduately, from right to left i guess the hardest part is to animate it from 'right to left', i had no problem animating something that increases size from left to right like the following
所以基本上需要做的是，在时间 0，宽度为 0，时间为 1，宽度应该逐渐增加，从右到左我想最难的部分是从“从右到左”动画，我对从左到右增加大小的东西进行动画处理没有问题，如下所示
@-webkit-keyframes reducetime {
0% {width: 100%;}
25% {width: 75%;}
50% {width: 50%;}
75% {width: 25%;}
to {width: 0%;}
}
I prefer solution does not require additional plugin, but feel free to provide solution like that if there is no other way. thanks
我更喜欢解决方案不需要额外的插件，但如果没有其他方法，请随时提供类似的解决方案。谢谢
回答by Micha? Miszczyszyn
You can use float:rightto place the container on the right:
您可以使用float:right将容器放在右侧：
#abc {
width: 100%;
height: 100px;
background-color: pink;
animation-name: reducetime;
animation-duration: 1s;
float: right;
}
@keyframes reducetime {
0% {
width: 0;
}
100% {
width: 100%;
}
}<div id="abc"></div>回答by Guffa
The width isn't animated from the left or the right, it's just the content of the div that is positioned from the left edge of the div.
宽度不是从左边或右边动画的，它只是从 div 的左边缘定位的 div 的内容。
Just position the content relative to the right edge to make it be hidden from the left. Depending on what you have in the div, you might need another container (div) inside it, that you style using position: absolute; right: 0.
只需将内容相对于右边缘定位即可使其从左侧隐藏。根据您在 div 中的内容，您可能需要在其中使用另一个容器 (div)，您可以使用position: absolute; right: 0.
