Question

我有一个div，我正在应用css3变换将其向右移动（向其中添加移动类）并离开（从中删除移动类）。在添加move类以使我的div（id = container）向右移动之后，我希望能够在第二次添加move类之后再将div更多地再次向右移动。当分别点击“向右移动”和“向左移动”按钮时，使用jquery添加或删除移动类。

这是我的代码：

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#bMoveRight').on('click', function(e){
            $('#container').addClass('move');
        });

        $('#bMoveLeft').on('click', function(e){
            $('#container').removeClass('move');
        });
    });     
    </script>
    <style>
    #container{
        width:100px;
        height:100px;
        background-color:red;
        box-shadow:5px 5px 10px #000;
        word-wrap:break-word;
        transition: translateX 2s;
        -webkit-transition: translateX 2s;
    }

    .move{
        transform: translateX(100px);
        -webkit-transform: translateX(100px);
    }
    </style>
        </head> (should match the opening <head> tag, omitted due to restraints on the posting)
            <body>
<div id="container">This is a good testing container that I hope will behave itself</div>
<p><button id="bMoveLeft">Move left</button>
<button id="bMoveRight">Move right</button></p>
</body>

Answer 1

无法将同一个类两次应用于一个元素。你可以做的是检查当前应用于该元素的类，然后应用正确的转换类（move2，move3等），每个转换类都有更大和更大的转换属性：

.move2 {
    transform: translateX(200px);
    -webkit-transform: translateX(200px);
}

Answer 2

根据你的回复，我通过调整你的想法得到了我想要的东西。我删除了css类并使用jquery动态应用了转换。我的代码现在看起来像这样：

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        var count = 0;
        $('#bMoveRight').on('click', function(e){
            ++count;
            $('#container').css('-webkit-transform', 'translateX(' + count + '00px)');
        });

        $('#bMoveLeft').on('click', function(e){
            --count;
            $('#container').css('-webkit-transform', 'translateX(' + count + '00px)');
        });
    });     
    </script>
    <style>
    #container{
        width:100px;
        height:100px;
        background-color:red;
        box-shadow:5px 5px 10px #000;
        word-wrap:break-word;
        transition: transform 2s;
        -webkit-transition: -webkit-transform 2s;
    }
    </style>

            <body>
        <div id="container">This is a good testing container that I hope will behave itself</div>
        <p><button id="bMoveLeft">Move left</button>
        <button id="bMoveRight">Move right</button></p>
  </body>

如何将css3转换重复应用于div元素

2 个答案: