在类更改上使用 css 制作动画

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.form.getElementsByTagName("button")[0].className ="active";

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

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

这样的东西会更好。

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

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

Answer 3

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> 标记设置为看起来像一个按钮。请试试这个答案的 sn-p。