简单的 CSS3 过渡答案

【问题标题】：Simple CSS3 transition简单的 CSS3 过渡
【发布时间】：2014-02-14 03:32:15
【问题描述】：

我无法使用此代码进行转换

从左到右更改文本对齐。非常简单的代码。

<style>
/* Default State */
div {
   background: green;
   width: 1000px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: left;
transition: all 10s;
-webkit-transition: all 10s;

}

/* Toggled State */
input[type=checkbox]:checked ~ div {
   text-align: right;

}
</style>

<label for="toggle-1">Do Something</label>
<input type="checkbox" id="toggle-1">
<div>Control me</div>

如果我需要不显示来阻止怎么办

【问题讨论】：

看这里-> stackoverflow.com/questions/18235764/…

标签： css transition

【解决方案1】：

text-align 属性不能在 CSS 中设置动画，如您所见 here。虽然这不能使用纯 CSS 进行动画处理，但您可以使用 jQuery library，如下例所示：

$("input[type=checkbox]").click(function (e) {
    if ($(this).prop("checked")) {
        var spanItem = document.getElementsByTagName("span").item(0).clientWidth;

        alert(spanItem);
        $("span").animate({
            width: $(this).textWidth()
        }, 500);
    }
});

上面的代码是我在this JSFiddle中写的一个示例。

【讨论】：

【解决方案2】：

CSS 过渡不支持文本对齐（如 maximgladkov 所说）。不过有很多选择。

https://developer.mozilla.org/en-US/docs/CSS/CSS_animated_properties

在一个小的旁注中；您可能希望将标签包裹在输入元素周围。

【讨论】：

感谢您提供有关“标签”的提示
这个链接也很有帮助

【解决方案3】：

我认为text-align 属性无法设置动画。

但您可以使用position: absolute 添加另一个元素，并为其left 或right 属性设置动画。

【讨论】：