css3-animation利用className切换来控制动画

昨天在开发中，使用animation时，碰到一个问题：
切换className时，其中一个className定义的动画不起作用，经过对animation对进一步了解后，终于解决该问题。
不起作用的原因是因为，在第一个className定义的动画执行完毕后，目标元素动画所需要的动画属性未定义，所以才造成动画失效。
简单的例子(本例子只是为了演示animation，故不考虑兼容性)：

DOM结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation-demo</title>
</head>
<style>
    .click-me {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 200px;
        height: 200px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -mz-border-radius: 10px;
        background-color: blue;
        color: #fff;
        line-height: 200px;
        text-align: center;
    }
    .click-me.animation-target {
        background-color: gray;
        transform: translateX(500%);
        -webkit-transform: translateX(500%);
    }
    .click-me.animation-target.active {
        animation: fadeIn 1s linear both;
        -webkit-animation: fadeIn 1s linear both;
        -moz-animation: fadeIn 1s linear both;
        -ms-animation: fadeIn 1s linear both;
    }

    .click-me.animation-target.hidden {
        animation: fadeOut 1s linear both;
        -webkit-animation: fadeOut 1s linear both;
        -moz-animation: fadeOut 1s linear both;
        -ms-animation: fadeOut 1s linear both;
    }
    
    @keyframes fadeIn {
        form {
            transform: translateX(500%);
            -webkit-transform: translateX(500%);
            -moz-transform: translateX(500%);
            -ms-transform: translateX(500%);
        }
        to {
            transform: translateX(100%);
            -webkit-transform: translateX(100%);
            -moz-transform: translateX(100%);
            -ms-transform: translateX(100%);
        }
    }

    @keyframes fadeOut {
        form {
            transform: translateX(100%);
            -webkit-transform: translateX(100%);
            -moz-transform: translateX(100%);
            -ms-transform: translateX(100%);
        }
        to {
            transform: translateX(500%);
            -webkit-transform: translateX(500%);
            -moz-transform: translateX(500%);
            -ms-transform: translateX(500%);
        }
    }

</style>
<body>
    <a href="javascript:;" class="click-me" id="clickMe" data-click='false'>点我执行动画</a>
    <a href="javascript:;" class="click-me animation-target"></a>
    <script>
        document.getElementById('clickMe').addEventListener('click', function () {
            console.log(typeof document.getElementById('clickMe').dataset.click)
            if (document.getElementById('clickMe').dataset.click === 'false') {
                document.querySelector('.animation-target').setAttribute('class', ('click-me animation-target' + ' active'));
                document.getElementById('clickMe').setAttribute('data-click', 'true');
            } else {
                document.querySelector('.animation-target').setAttribute('class', ('click-me animation-target' + ' hidden'));
                document.getElementById('clickMe').setAttribute('data-click', 'false');
            }
        });
    </script>
</body>
</html>

在这个情况下，className切换到hidden时，animation是不起作用的，这时，是因为.animation-targe元素的transform属性值跟添加.active样式后的值不一致，所以，当添加.hidden时，.animation-targe元素直接跳到动画结束的状态。
现在，让我们修改一下js代码，为.animation-targe元素指定动画结束后的transform属性值。
代码如下：

setTimeout(function () {
    document.querySelector('.animation-target').style.transform = 'translateX(100%)';
},1000);

添加定时的原因是为了设置延迟添加样式，如果不添加setTImeout定时器，.animation-targe元素将直接移动到指定位置（定时器的时间跟动画时间一致）。
附上完整的JS代码：

<script>
        document.getElementById('clickMe').addEventListener('click', function () {
            console.log(typeof document.getElementById('clickMe').dataset.click)
            if (document.getElementById('clickMe').dataset.click === 'false') {
                document.querySelector('.animation-target').setAttribute('class', ('click-me animation-target' + ' active'));
                setTimeout(function () {
                    document.querySelector('.animation-target').style.transform = 'translateX(100%)';
                },1000);
                document.getElementById('clickMe').setAttribute('data-click', 'true');
            } else {
                document.querySelector('.animation-target').setAttribute('class', ('click-me animation-target' + ' hidden'));
                document.getElementById('clickMe').setAttribute('data-click', 'false');
                setTimeout(function () {
                    document.querySelector('.animation-target').style.transform = 'translateX(500%)';
                },1000);
            }
        });
    </script>

css3-animation利用className切换来控制动画

DOM结构

推荐阅读更多精彩内容