html - 通过单击一次按钮在不同的选择器上运行链式动画

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