原生js添加移除类名(class)实现css3动画

  • 源代码
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css3动画及原生添加移除类名(class)title>
        <style>
            .two {
                width: 100px;
                height: 100px;
                background-color: pink;
            }
    		/*transition实现动画*/
            /*.two.now {*/
                /*transform: translate(500px, 100px);*/
                /*opacity: 0.5;*/
                /*background-color: green;*/
                /*transition: all 1s linear;*/
            /*}*/
    		/*animation 实现动画*/
            .two.now {
                animation: myAnimation 1s linear forwards;/*infinite alternate forwards*/
            }
            @keyframes myAnimation {
                from {
                    transform: translate(0, 0);
                }
                to {
                    transform: translate(500px, 100px);
                }
            }
        style>
    head>
    <body>
    <input type="button" value="开始动画" class="one">
    <input type="button" value="重置动画" class="three">
    <div class="two">div>
    <script>
        var btn = document.getElementsByClassName('one')[0];
        var div = document.getElementsByClassName('two')[0];
        var btn2 = document.getElementsByClassName('three')[0];
        btn.onclick = function () {
        	//不同添加类名的方式
            // div.className = 'two now';
            // div.setAttribute('class', 'two now');
            
            // 虽然element.classList本身是只读的,但是你可以使用 add() 和 remove() 方法修改它。//h5的api,基于一个对象classList
            div.classList.add('now');
            
            // div.setAttribute('className', 'two now');
            // 兼容ie7及ie7以下版本
        };
        btn2.onclick = function () {
            div.classList.remove('now');
        };
        //jquery操作类的方法 addClass() removeClass() toggleClass hasClass()
        //h5 dom.classList.add() dom.classList.remove() dom.classList.toggle()
        //dom.classList.contains()
    script>
    body>
    html>
    

你可能感兴趣的:(随笔)