左边距过渡没有动画

Posted 2023-03-06

【中文标题】左边距过渡没有动画

【英文标题】：margin-left transition not animating

【发布时间】：2017-12-20 13:15:24

【问题描述】：

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

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

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

这是一个JS Fiddle 显示问题。

如果您单击标有“向左动画”的按钮，它会使用 jQuery animate() 并按预期工作。

如果您单击标有“向左过渡”的按钮，它会为元素添加“幻灯片”类，但不会按预期工作。

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

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

任何想法为什么这不起作用？

【参考方案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/

【讨论】：

问题是为什么 margin-left 不起作用，而不是使用 translate。

有趣的是，这似乎适用于翻译，但不适用于左边距。我想说这个答案是实现相同目标的一种不错的替代方法。不幸的是，它没有解释为什么动画左边距不起作用。有什么想法吗？

我已经接受了 dejakob 的回答，因为我能够将边距保留为 auto，但没有一个答案可以在不删除我确实需要的动态添加的 div 的情况下进行转换。动态添加的 div 似乎是过渡不起作用的原因 :( 感谢大家的帮助。

【参考方案2】：

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

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

【参考方案3】：

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

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

JS-小提琴

JS-小提琴：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() 
  );
);