Question

请你看一下this demo，让我知道为什么我无法通过jquery将动画效果添加到活动类

我有一个名为

的班级

.sliding-middle-out {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}
.sliding-middle-out:after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}

.sliding-middle-out:hover:after {
    width: 100%;
    background: blue;
}

现在我想将相同的动画效果添加到活动类中，而不会调用悬停效果。我做的是合并后面的悬停部分

.sliding-middle-out:after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
    width: 100%;
    background: blue;
}

并将类.sliding-middle-out添加到.active类中，如

 $("button").click(function(){
        $(".active").addClass("sliding-middle-out");
 });

添加没有动画效果的类。

Answer 1

您需要设置:after类.active的样式才能使效果正常工作。检查一下：

Updated JSFiddle

向活动类添加动画效果的问题

1 个答案: