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

最新推荐文章于 2023-04-14 08:27:26 发布

原创最新推荐文章于 2023-04-14 08:27:26 发布 · 7.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#原生js添加类名 #css3动画

随笔专栏收录该内容

0 篇文章

订阅专栏

                    
                        
                    
                    源代码<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>




                