Question

我试图通过点击按钮来运行2个CSS3动画。第一个动画使按钮旋转并消失，第二个动画改变第二个动画，并使其显示（不透明度从0.5变为1）并改变其高度。

问题是只有第一个动画才会运行。第一个动画名称是

q1leave

，第二个动画名称是

q2show

。要运行第一个动画我在CSS上使用#btnq1:target并运行第二个动画我使用#btnq1:target #btnq2a

见下面我的代码：

HTML代码

<div id="q1">
    <div class="q1once">
        <a href="#btnq1"><button type="button" name="" value="" id="btnq1">Click to disappear and then change a different element </button></a>
    </div>
</div>

<button type="button" name="" value="" id="btnq2a">Must change</button>

CSS代码

#q1 {
    height:100%;
}
.q1once {
    width:20%;
    height:15%;
    position:absolute;
    left:-50%;
    animation-name:q1;
    animation-delay:3s;
    animation-iteration-count:1;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
}
#btnq1:target {
    animation-name:q1leave;
    animation-iteration-count:1;
    animation-duration:4s;
    animation-fill-mode:forwards;
}
#btnq1:target #btnq2a {
    animation-name:q2show;
    animation-iteration-count:1;
    animation-delay:4s;
    animation-duration:4s;
    animation-fill-mode:forwards;
}
@keyframes q1 {
    50% {
        transform:translate(440%) scaleX(3);
    }
    100% {
        transform:translate(450%) scale(1.5, 2);
    }
}
@keyframes q1leave {
    0% {
        transform:rotate(0deg);
        opacity:1;
    }
    100% {
        opacity:0;
        transform:rotate(360deg);
    }
}
@keyframes q2show {
    100% {
        opacity:1;
        height:200px;
    }
}
#btnq2a {
    opacity:0.5;
}

你也可以jsfiddle。我想只使用CSS3解决它，但我会接受使用JS，jquery或其他的其他解决方案。我做错了什么？

Answer 1

最简单的方法是在点击第一个目标时使用JavaScript将类添加到第二个目标。

var btn1 = document.getElementById('btnq1');
var btn2 = document.getElementById('btnq2a');
btn1.addEventListener('click', makeActive);

function makeActive(){
    var className = ' ' + btn2.className + ' ';
    // from SO Question #14615712
    if ( ~className.indexOf(' active ') ) {
        btn2.className = className.replace(' active ', ' ');
    } else {
        btn2.className += ' active ';
    }              
}

如果您愿意，可以使用jQuery：

$('#btnq1').on('click', function () {
    $('#btnq2a').toggleClass('active');
});

然后，稍微调整一下CSS选择器。

#btnq2a.active {
    animation-name:q2show;
    animation-iteration-count:1;
    animation-delay:4s;
    animation-duration:4s;
    animation-fill-mode:forwards;
}

这是更新后的FIDDLE

通过单击按钮在不同的选择器上运行链动画

1 个答案: