Question

我想通过操纵左边距来制作元素幻灯片。

我已经使用jQuery animate()了解它，但希望使用CSS转换来提高性能。

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

这是显示问题的JS Fiddle。

如果单击标有“animate left”的按钮，它将使用jQuery animate()并按预期工作。

如果单击标记为“向左转移”的按钮，则会在元素中添加“幻灯片”类，但不会按预期工作。

我尝试将利润率从自动转换为固定百分比，但它根本没有帮助。

有趣的是，如果你点击F12并手动将'slide'类margin-left属性从-100％更改为-50％，它会动画！

为什么这不起作用？

Answer 1

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

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

此外，更喜欢使用翻译转换而不是保证金。他们的动画效果更好：

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

通过这些更改，div'向左滑动'：https://jsfiddle.net/d30oewxz/5/

Answer 2

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

另外，我建议避免让多个具有相同id的元素，例如你的jquery生成多个<div id="content">。

Answer 3

你遇到的问题是margin-left的值为auto。您无法根据自动值设置动画。所以我用0px替换它。

我还删除了jQuery对html所做的修改。特别是.wrap（）似乎会引起其他问题。

<强> JS-小提琴

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过渡不是动画

3 个答案: