左边距过渡不动画

Question

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

我已经使用 jQueryanimate()让它工作，但想使用 CSS 过渡来提高性能。

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

这是一个显示问题的JS小提琴。

如果单击标有"动画左"的按钮，它将使用 jQueryanimate()并按预期工作。

如果单击标有"左过渡"的按钮，则会添加元素的"slide"类，但无法按预期工作。

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

有趣的是，如果您按 F12 并手动将"slide"类左边距属性从 -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

您遇到的问题是左边距的值为 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() {
});
});