关于DOM的简单动画

Posted lxy02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于DOM的简单动画相关的知识，希望对你有一定的参考价值。

利用DOM制作的一些简单动画

1、div每点击一次 向右移动200px(带DOM动画过渡)

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            font-size: 20px;
        }
        #testDiv {
            width: 150px;
            height: 150px;
            background: #abcdef;
            position: relative;
            margin-left: 50px;
        }
        #duiZhao {
            width: 150px;
            height: 150px;
            background: greenyellow;
            position: relative;
            margin-left: 50px;
            left: 200px;
        }
    </style>
</head>
<body>
    <h1>10.div每点击一次 向右移动200px(带DOM动画过渡)</h1>
    <div id="testDiv">点击我会移动</div>
    <div id="duiZhao">我是移动后200px位置的参照</div>
    <script>
        var testDiv = document.getElementById(‘testDiv‘);
        testDiv.addEventListener(‘click‘, divMove );
        function divMove() {
            var frameCount = 50;
            var n = 200/frameCount ;  //1s50帧
            var count = 0;
            var setIntervalId = setInterval(divSmallMove,1000/frameCount);  //1s50帧
            divSmallMove();
            function divSmallMove() {
                testDiv.style.left = parseInt(getStyle(testDiv, ‘left‘))+ n + ‘px‘;
                count ++;
                if(count == frameCount) {  //移动了50帧，说明位置到了，停下来
                    clearInterval(setIntervalId);
                }
            }
        }
        function getStyle(obj, attr) {
            if (obj.currentStyle) {//IE
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, "伪类")[attr];//Firefox
            }
        }
    </script>
</body>
</html>
div每点击一次 向右移动200px(带DOM动画过渡）

2、利用DOM实现hover效果

技术分享 
       //鼠标移入函数
        function mouseEnterFunc() {
            this.style.backgroundColor = ‘#abcdef‘;
        }
        //鼠标移出函数
        function mouseLeaveFunc() {
            this.style.backgroundColor = ‘#fff‘;
        }
        var trArr = myTabel.getElementById(‘tr‘);
        tr.addEventListener(‘mouseenter‘,mouseEnterFunc);
        tr.addEventListener(‘mouseleave‘,mouseLeaveFunc);
DOM实现hover效果

 

以上是关于关于DOM的简单动画的主要内容，如果未能解决你的问题，请参考以下文章

jQuery的DOM操作

片段交易动画：滑入滑出

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段7——CSS动画

Blender制作多个动画片段时踩的坑