动画框架

原创于 2020-04-05 23:51:04 发布 · 83 阅读

CC 4.0 BY-SA版权

本文展示了一个使用CSS样式和JavaScript实现的动态过渡效果案例。通过定义一个红色方块，并利用mTween库进行动画处理，当点击方块时，其宽度、高度和透明度将发生动态变化。该案例涉及了HTML元素选择、属性动画设置和回调函数的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例：

<style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

<body>
	<div id="box"></div>
</body>

<script>

        (function () {

            let box = document.querySelector("#box");
            box.onclick = function () {
                mTween({
                    el: box,
                    attr: {
                        width: 300
                    },
                    duration: 600,
                    fx: "backOut",
                    cb() {
                        mTween({
                            el: box,
                            attr: {
                                height: 300
                            },
                            duration: 600,
                            fx: "backOut",
                            cb() {
                                mTween({
                                    el: box,
                                    attr: {
                                        opacity: 0.5
                                    },
                                    duration: 600,
                                    fx: "backOut",
                                });
                            }
                        });
                    }
                });
            }

        })()


    </script>