左边距过渡不动画

Question

我想通过操作左边距使元素滑动。

我已经使用 jQuery animate() 使其正常工作，但想使用 CSS 转换来提高性能。

我正在使用 jQuery 向我想要滑动的元素添加一个新的 class，但它没有动画 - 它只是立即移动元素。

这里 JS Fiddle 显示了问题。

如果您单击标记为 'animate left' 的按钮，它会使用 jQuery animate() 并按预期工作。

如果您单击标有 'transition left' 的按钮，它会添加 'slide' class 元素，但不会按预期工作。

我试过将边距从自动更改为固定百分比，但一点用都没有。

有趣的是，如果您按下 F12 并手动将 'slide' class margin-left 属性从 -100% 更改为 -50%，它就会动画化！

知道为什么这不起作用吗？

Answer 1

您只需要将幻灯片 class 添加到容器中，因此不需要单击事件中的所有其他内容。

$('.transition').on('click',function() {
  var container = $('.container');
  container.addClass('slide');
});

此外，更喜欢使用平移转换而不是边距。它们的动画性能更高：

.slide {
    transform: translate(-100%, 0);
    transition: transform 1s linear;
}

通过这些更改，div 'slides' 剩下：https://jsfiddle.net/d30oewxz/5/

Answer 2

问题在于您创建新 DOM 元素的方式。请注意，添加的没有附加 .slide class。

此外，我建议避免使用具有相同 ID 的多个元素，例如多个 <div id="content"> 您的 jquery 生成。

Answer 3

您遇到的问题是 margin-left 的值为 auto。您不能根据自动值设置动画。所以我用0px代替了它。

我还删除了 jQuery 对 html 所做的修改。特别是 .wrap() 似乎会导致其他问题。

JS-Fiddle

JS-Fiddle: https://jsfiddle.net/d30oewxz/6/

html

<div class="main-content">
  <div class="container">
  <div id="content">
   THIS IS SLIDE 1
  </div>
  </div>
</div>

css

.content-wrapper {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    white-space: nowrap;
}
.content-wrapper > * {
    display: inline-block;
    vertical-align: top;
}
.container {
    position: relative;
    white-space: normal;
    width: 400px;
    margin-left: 0px;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    border: 1px solid #000;
    text-align: center;
    -webkit-transition: margin-left 1s linear;
    -khtml-transition: margin-left 1s linear;
    -moz-transition: margin-left 1s linear;
    -ms-transition: margin-left 1s linear;
    transition: margin-left 1s linear;
}
.button {
    margin-top:50px;
}
.slide {
    margin-left: -100%;
}

JS/jQuery

$('.transition').on('click',function() {
  var container = $('.container');
  //removed this part of the code
  $('.container').addClass('slide');
});

$('.animate').on('click',function() {
  var container = $('.container');
  container.wrap('<div class="content-wrapper" style="width: ' + container.outerWidth() + 'px;"></div>');
  var  direction = {marginLeft: '-=100%'};
  $('.container').parent().append('<div class="container"><div id="content">THIS SLIDE ANIMATES WITH JQUERY</div></div>');
  container.animate(direction, 1000, function() {
  });
});

左边距过渡不动画

margin-left transition not animating

css

css-transitions

jquery-animate