如何使jQuery控制的CSS平滑过渡？

Question

您好，我有一个要由jQuery控制的div。 我想在单击时将div移到页面的中心。 为此，我设置了一个jQuery函数来影响通过CSS的定位。 它可以工作，但是过渡不平稳，即使添加css过渡，它也会立即发生。 下面是我到目前为止的代码

这是CSS：

.footer-active-line {
    height: 10px;
    width: 33.3333333333%;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

这是jQuery：

jQuery(".footer-locations-box2").click(function(){
    jQuery(".footer-active-line").css({ 'right': '0px', 'left': '0', 'margin': '0 auto' })        
});

这段代码有效，div居中，但过渡不起作用。有人知道使过渡平滑的方法吗？

谢谢！

Answer 1

正如我在评论中提到的，CSS过渡不适用于目的地或auto起始值。 它必须以某种方式是数字。 就是说，您使用的是margin: 0 auto因为它会自动调整边距，从而产生居中的错觉。 基本上，浏览器在两侧设置相同的边距以适合容器。 要注意的是，您已经知道目标边距是多少。 您的.footer-active-line设置为容器宽度的1/3，该宽度为width: 33.3333333333%; 。 您可以使用100％的transform （相对于它所应用的元素的宽度），也可以将边距设置为33% ，相对于偏移父级。

这是方法一：

 jQuery(".footer-locations-box2").click(function(){ jQuery(".footer-active-line").css({ transform: 'translateX(100%)' }); }); 

 .footer-active-line { background: red; height: 10px; width: 33.3333333333%; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="footer-active-line"> </div> <button class="footer-locations-box2">transition</button> 

这是方法二：

 jQuery(".footer-locations-box2").click(function(){ jQuery(".footer-active-line").css({ margin: '0 33.33333%' }); }); 

 .footer-active-line { background: red; height: 10px; width: 33.3333333333%; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="footer-active-line"> </div> <button class="footer-locations-box2">transition</button> 

Answer 2

您的点击事件可能会破坏动画。 尝试对您的处理程序进行此更改

    jQuery(".footer-locations-box2").click(function(e){
        e.preventDefault();
        jQuery(".footer-active-line").css({ 'right': '0px', 'left': '0', 'margin': '0 auto' })        
    });