Question

我试图通过更改类名来使用javascript为表单按钮设置css属性的动画。属性更改已应用但未动画，我看不清楚原因。以下是我的代码：

的CSS：

button {
    padding-right: 0px;
    transition: padding-right 2.5s;

}

button.inactive {
    padding-right: 0px;

}

button.active {
    padding-right: 100px;
}

javascript（转换为有效版）：

this.form.getElementsByTagName("button")[0].className ="active";

（转换为非活动状态）：

this.form.getElementsByTagName("button")[0].className ="inactive";

Answer 1

我使用您提供的代码模拟了一个示例，并且动画过渡发生了没有问题 - 可以在这里看到https://jsbin.com/qewolu/edit?html,css,js,output

Answer 2

this.document.getElementsByTagName("a")[0].addEventListener('click', function() {this.className ="active"});

    a {
        padding: 10px;  
        border: 1px solid #39C;
        background-color: #036;
        color: white;
        transition: padding-right 2.5s;      
    }

    a.inactive {
        padding: 10px;
    }

    a.active {
        padding-right: 100px;
    }

<a class="inactive">Test</a>

修改

确实是@Rhi，他的原始代码正在部分在Chrome上运行。似乎button元素不支持Firefox上的填充转换。可能的解决方法是使用锚元素，并将<A>标记设置为看起来像按钮。请试试这个答案的片段。

Answer 3

在这一行中，

this.form.getElementsByTagName("button")[0].className ="active";

您如何获得表单元素的引用？

我认为您需要在访问按钮之前获取表单元素的引用。

这样的事情会更好。

var form = document.myForm;
form.getElementsByTagName("button")[0].className ="active";

演示https://jsfiddle.net/84133s8v/

在类更改时使用css动画

3 个答案:

修改