如何重复应用 css3 变换到 div 元素答案

【问题标题】：how to apply repeatedly css3 transform to div element如何重复应用 css3 变换到 div 元素
【发布时间】：2013-02-07 08:40:09
【问题描述】：

我有一个 div，我正在应用 css3 变换将其向右移动（向其中添加移动类）和向左移动（从中删除移动类）。添加移动类以使我的 div (id=container) 向右移动后，我希望能够在第二次添加移动类后使 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>

【问题讨论】：

标签： jquery css transform

【解决方案1】：

没有办法将同一个类两次应用于一个元素。您可以做的是检查当前应用到元素的类，然后应用正确的转换类（move2、move3 等），每个类都具有越来越大的转换属性：

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

【讨论】：

【解决方案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>

【讨论】：