Question

我无法过渡到使用此代码

从左到右更改text-align。非常简单的代码。

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

如果我需要显示无阻止

，该怎么办？

Answer 1

CSS Transition不支持Text-align（就像maximgladkov所说）。但是有很多选择。

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

在一个小旁注;您可能希望在输入元素周围包装标签。

Answer 2

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中编写的示例。

Answer 3

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

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

简单的CSS3过渡

3 个答案: