空白左轉換沒有動畫效果

我想通過操作左邊距來製作元素。空白左轉換沒有動畫效果

我已經使用jQuery animate()工作，但想要提高使用CSS轉換的性能。

我正在使用jQuery向我要滑動的元素添加一個新類，但它沒有動畫 - 它只是立即移動元素。

下面是顯示問題的JS Fiddle。

如果您點擊標有'animate left'的按鈕，它會使用jQuery animate()並按預期工作。

如果您單擊標記爲'過渡'的按鈕，它會將「幻燈片」類添加到該元素，但不會按預期工作。

我已經嘗試將邊距從自動更改爲固定的百分比，但它根本沒有幫助。有趣的是，如果您按F12並手動將'幻燈片'類的margin-left屬性從-100％更改爲-50％，它就會生成動畫！

任何想法爲什麼這不起作用？

來源

2017-07-15 Damian

您只需要將幻燈片類添加到容器中，因此不需要單擊事件中的其他所有內容。

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

此外，更喜歡使用translate轉換，而不是保證金。他們更高性能的動畫：

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

這些變化，在div「滑梯」左：https://jsfiddle.net/d30oewxz/5/

來源

2017-07-15 16:28:04 dejakob

的問題是，爲什麼保證金左不工作，不使用翻譯。 –

有趣的是，這似乎適用於翻譯，但不是保證金。我會說這個答案是一個很好的替代方法來實現同樣的事情。不幸的是，這並不能解釋爲什麼動畫化邊距不起作用。那裏有任何想法？ – RMo

我已經接受了dejakob的答案，因爲我可以將邊距保留爲auto，但沒有任何答案會使轉換工作無需剝離動態添加的div，而我確實需要這樣做。動態添加的div似乎是轉換無法正常工作的原因:(謝謝大家的幫助。 – Damian

問題是與你創造新的DOM元素的方式。請注意，添加的附件沒有類。

此外，我會建議避免有多個元素相同的ID，如你的jQuery生成多個<div id="content">。

來源

2017-07-15 16:29:00 kamyl

您遇到的問題是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() { 
    }); 
});

來源

2017-07-15 17:01:10 RMo

空白左轉換沒有動畫效果

回答

相關問題