css3动画问题

发布网友发布时间：2022-04-23 09:26

共1个回答

热心网友时间：2022-04-06 13:12

<div id="a">a</div>
<div id="b">b</div>
<script>
    flag = 0;
    bflaga = 0;
    bflagb = 0;
    aflag = 0;
    var aElement = document.getElementById('a');
    var bElement = document.getElementById('b');
    aElement.addEventListener('click', aclick);
    bElement.addEventListener('click', bclick);
    document.body.addEventListener('click', bodyclick);

    function aclick() {
        aflag = 1;
        flag = 1;
        bElement.classList.add('move');
    }

    function bclick() {
        bflagb = 1;
        if (bflaga === 1) {
            bElement.classList.remove('zoom');
            bflaga = 0;
            return 0;
        }
        else {
            bElement.classList.add('zoom');
            bflaga = 1;
        }
    }

    function bodyclick() {
        if (flag && !bflagb && !aflag) {
            bElement.classList.remove('move');
            flag = 0;
            aflag = 0;
            bflagb = 0;
        }
        else{
            aflag = 0;
            bflagb = 0;
        }
    }
</script>

然后再用CSS对move（点击了a标签的）和zoom（点击了b标签的）进行调整即可