javascript - jquery中的animate不能操作transform？-PHP中文网问答

我在一个网站上看见transform: translate(0%)是变化的,但是自己试不出来

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;

        }
        .box {
            width: 440px;
            height: 240px;
            background-color: #cecece;
            margin: 100px auto;
            padding: 0 37px;
            box-sizing: border-box;
        }
        .table {
            width: 100%;
            height: 41px;
            background-color: #e3e3e3;
            display: table;
            position: relative;
        }
        .cell {
            display: table-cell;
            background-color: #665d16;
            text-align: center;
            vertical-align: middle;
        }
        .move {
            position: absolute;
            width: 33.33333%;
            height: 100%;
            left: 0;
            bottom: 0;
            transform: translate(0%);
        }
        .move::before {
            content: '';
            height: 2px;
            width: 100%;
            background-color: #1478f1;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
<p class="box">
    <p class="table">
        <p class="cell">全球</p>
        <p class="cell">全球</p>
        <p class="cell">全球</p>
        <p class="move"></p>
    </p>
</p>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
    $('.cell').click(function () {
        var num = $(this).index();
        $('.move').animate({transform: 'translate(' + num * 100 + '%)'});
//        $('.move').css({transform: 'translate(' + num * 100 + '%)'});
    })
</script>
</body>
</html>

用css可以改变transform,但是用animate不能改变,什么原因?
怎么解决?

全部回复(1)

高洛峰2017-04-11 09:19:56 1楼

截图是w3c中展示的animate的支持属性:

ps: 今天突然想起来有一个这个问题, 回来一看问了题主看到的代码的实现网站, 确实回复了, 只不过没有@我, 所以建议以后要@别人才会有提示.

简单看了一下对方的实现方式, 如图正在移动的过程中:

首先开发是使用的reactjs, t可能是一个nav标签组件的一个state, 因为是动态变化的, 每次在生成一个调用方法的时候都动态生成一个t, 这个暂且不说, 因为和题目无关.
即为每次移动都重新生成一个p, 由

var r = t.x;

来控制

transform: "translate(" + 100 * r + "%)";

所以该实现方式与jQuery的animate无关, 题主可以看一下这个实现方式.

ps: react中可以轻松实现这个需求.

赞 +0

添加回复