jQuery和css相结合制作动画----jQuery中animate方法不支持transform属性的解决方案

最新推荐文章于 2022-04-22 21:00:02 发布

徐同保

最新推荐文章于 2022-04-22 21:00:02 发布

阅读量929

点赞数 1

分类专栏： web前端前端技术分享文章标签： animate transform

本文链接：https://blog.csdn.net/xutongbao/article/details/82144722

版权

web前端同时被 2 个专栏收录

735 篇文章 15 订阅

订阅专栏

前端技术分享

251 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
        <meta charset="utf-8">
        <meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>jQuery和css相结合制作动画----jQuery中animate方法不支持transform属性的解决方案</title>
<head>
    <style>
    .m-test {
        width: 100px;
        height: 100px;
        background: red;
        position: relative;
    }
    .m-animation {
        transform: translate(0px, 100px);
        transition: all 0.5s ease-in-out;
    }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>

<body>
    <div class="m-test" id="m-test"></div>
    <script>
    $(function() {
        var myAction = {};
        var dom = {
            test: $('#m-test')
        };

        $.extend(myAction, {
            initAnimation: function() {
                //dom.test.addClass('m-animation');
                dom.test.css({ transform: 'translate(0px, 100px)', transition: 'all 0.5s ease-in-out' });
            }
        });

        var init = function() {
            myAction.initAnimation();
        }();
    })
    </script>
</body>

</html>

徐同保

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery和css相结合制作动画----jQuery中animate方法不支持transform属性的解决方案

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, ...
复制链接

扫一扫