使用Semantic-ui和Isotope.js-過渡后項目會晃動

Question

我在與語義UI框架一起使用的isotope.js時遇到了一些麻煩，如您所見，在進行任何轉換后，這些項都在“晃動”。

我已經讀過過渡期后同位素同位素搖動的問題，但對我沒有幫助

提前致謝

---

  $(window).load(function() { // init Isotope var $container = $('.isotope').isotope({ itemSelector: '.element-item', layoutMode: 'masonry', getSortData: { name: '.name', number: '.number parseInt', category: '[data-category]' } }); // bind filter button click $('#filters').on( 'click', 'button', function() { var filterValue = $( this ).attr('data-filter'); $container.isotope({ filter: filterValue }); }); // bind sort button click $('#sorts').on( 'click', 'button', function() { var sortByValue = $(this).attr('data-sort-by'); $container.isotope({ sortBy: sortByValue }); }); // change is-checked class on buttons $('.buttons').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function() { $buttonGroup.find('.active').removeClass('active'); $( this ).addClass('active'); }); }); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.js"></script> <div class="ui container"> <h2>Filtering</h2> <div id="filters" class="ui buttons"> <button class="ui button active" data-filter="*">All</button> <button class="ui button" data-filter=".metal">Metal</button> <button class="ui button" data-filter=".transition">Transition</button> <button class="ui button" data-filter=".noble-gas">Noble gaz</button> </div> <div class="ui divider"></div> <h2>Sorting</h2> <div id="sorts" class="ui buttons"> <button class="ui button active" data-sort-by="original-order">0riginal order</button> <button class="ui button" data-sort-by="number">Likes</button> <button class="ui button" data-sort-by="name">Name</button> </div> <div class="ui divider"></div> <div class="segment"> <div class="ui fluid cards isotope"> <div class="ui fluid card element-item transition metal" data-category="transition"> <div class="content"> <i class="right floated like icon"></i> <i class="right floated star icon"></i> <div class="header name">A</div> <div class="description"> <p></p> </div> </div> <div class="extra content"> <span class="left floated like"> <i class="like icon"></i> <span class="number">31</span> Like </span> <span class="right floated star"> <i class="star icon"></i> Favorite </span> </div> </div> <div class="ui fluid card element-item transition lanthanoid metal inner-transition " data-category="lanthanoid"> <div class="content"> <i class="right floated like icon"></i> <i class="right floated star icon"></i> <div class="header name">D</div> <div class="description"> <p></p> </div> </div> <div class="extra content"> <span class="left floated like"> <i class="like icon"></i> <span class="number">34</span> Like </span> <span class="right floated star"> <i class="star icon"></i> Favorite </span> </div> </div> <div class="ui fluid card element-item transition metal" data-category="transition"> <div class="content"> <i class="right floated like icon"></i> <i class="right floated star icon"></i> <div class="header name">H</div> <div class="description"> <p></p> </div> </div> <div class="extra content"> <span class="left floated like"> <i class="like icon"></i> <span class="number">36</span> Like </span> <span class="right floated star"> <i class="star icon"></i> Favorite </span> </div> </div> <div class="ui fluid card element-item lanthanoid metal inner-transition " data-category="lanthanoid"> <div class="content"> <i class="right floated like icon"></i> <i class="right floated star icon"></i> <div class="header name">E</div> <div class="description"> <p></p> </div> </div> <div class="extra content"> <span class="left floated like"> <i class="like icon"></i> <span class="number">63</span> Like </span> <span class="right floated star"> <i class="star icon"></i> Favorite </span> </div> </div> <div class="ui fluid card element-item noble-gas nonmetal " data-category="noble-gas"> <div class="content"> <i class="right floated like icon"></i> <i class="right floated star icon"></i> <div class="header name">J</div> <div class="description"> <p></p> </div> </div> <div class="extra content"> <span class="left floated like"> <i class="like icon"></i> <span class="number">23</span> Like </span> <span class="right floated star"> <i class="star icon"></i> Favorite </span> </div> </div> <div class="ui fluid card element-item transition metal" data-category="transition"> <div class="content"> <i class="right floated like icon"></i> <i class="right floated star icon"></i> <div class="header name">B</div> <div class="description"> <p></p> </div> </div> <div class="extra content"> <span class="left floated like"> <i class="like icon"></i> <span class="number">86</span> Like </span> <span class="right floated star"> <i class="star icon"></i> Favorite </span> </div> </div> <div class="ui fluid card element-item lanthanoid metal inner-transition " data-category="lanthanoid"> <div class="content"> <i class="right floated like icon"></i> <i class="right floated star icon"></i> <div class="header name">Z</div> <div class="description"> <p></p> </div> </div> <div class="extra content"> <span class="left floated like"> <i class="like icon"></i> <span class="number">45</span> Like </span> <span class="right floated star"> <i class="star icon"></i> Favorite </span> </div> </div> </div> </div> </div> 

Answer 1

在使用masonary.js的語義UI卡時，我遇到了完全相同的問題。 我開始擺弄並設法通過刪除此CSS規則擺脫了這個問題：

.ui.cards > .card, .ui.card {
    transition: box-shadow 0.1s ease 0s, transform 0.1s ease 0s, -webkit-transform 0.1s ease 0s;
}

希望能幫助到你！

Answer 2

okonuskan解決了這個問題

這是已更正的原始代碼段：

 $(window).load(function() { // init Isotope var $container = $('.isotope').isotope({ itemSelector: '.element-item', layoutMode: 'masonry', getSortData: { name: '.name', number: '.number parseInt', category: '[data-category]' } }); // bind filter button click $('#filters').on('click', 'button', function() { var filterValue = $(this).attr('data-filter'); $container.isotope({ filter: filterValue }); }); // bind sort button click $('#sorts').on('click', 'button', function() { var sortByValue = $(this).attr('data-sort-by'); $container.isotope({ sortBy: sortByValue }); }); // change is-checked class on buttons $('.buttons').each(function(i, buttonGroup) { var $buttonGroup = $(buttonGroup); $buttonGroup.on('click', 'button', function() { $buttonGroup.find('.active').removeClass('active'); $(this).addClass('active'); }); }); }); 

 /*! * # Semantic UI 2.1.7 - Item * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Standard *******************************/ /*-------------- Card ---------------*/ .ui.cards > .card, .ui.card { max-width: 100%; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 290px; min-height: 0px; background: #ffffff; padding: 0em; border: none; border-radius: 0.28571429rem; box-shadow: 0px 1px 3px 0px #d4d4d5, 0px 0px 0px 1px #d4d4d5; z-index: ''; } .ui.card { margin: 1em 0em; } .ui.cards > .card a, .ui.card a { cursor: pointer; } .ui.card:first-child { margin-top: 0em; } .ui.card:last-child { margin-bottom: 0em; } /*------------------------ Minified part : -------------------------*/ .ui.card:after,.ui.card>.content:after,.ui.cards:after,.ui.cards>.card>.content:after{content:' ';overflow:hidden;visibility:hidden;clear:both}.ui.cards{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:-.875em -.5em;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.ui.cards>.card{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:.875em .5em;float:none}.ui.card:after,.ui.cards:after{display:block;height:0}.ui.cards~.ui.cards{margin-top:.875em}.ui.card>:first-child,.ui.cards>.card>:first-child{border-radius:.28571429rem .28571429rem 0 0!important;border-top:none!important}.ui.card>:last-child,.ui.cards>.card>:last-child{border-radius:0 0 .28571429rem .28571429rem!important}.ui.card>:only-child,.ui.cards>.card>:only-child{border-radius:.28571429rem!important}.ui.card>.image,.ui.cards>.card>.image{position:relative;display:block;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding:0;background:rgba(0,0,0,.05)}.ui.card>.image>img,.ui.cards>.card>.image>img{display:block;width:100%;height:auto;border-radius:inherit}.ui.card>.image:not(.ui)>img,.ui.cards>.card>.image:not(.ui)>img{border:none}.ui.card>.content,.ui.cards>.card>.content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;border:none;border-top:1px solid rgba(34,36,38,.1);background:0 0;margin:0;padding:1em;box-shadow:none;font-size:1em;border-radius:0}.ui.card>.content:after,.ui.cards>.card>.content:after{display:block;height:0}.ui.card>.content>.header,.ui.cards>.card>.content>.header{display:block;margin:'';font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;color:rgba(0,0,0,.85)}.ui.card>.content>.header:not(.ui),.ui.cards>.card>.content>.header:not(.ui){font-weight:700;font-size:1.28571429em;margin-top:-.21425em;line-height:1.2857em}.ui.card>.content>.header+.description,.ui.card>.content>.meta+.description,.ui.cards>.card>.content>.header+.description,.ui.cards>.card>.content>.meta+.description{margin-top:.5em}.ui.card [class*="left floated"],.ui.cards>.card [class*="left floated"]{float:left}.ui.card [class*="right floated"],.ui.cards>.card [class*="right floated"]{float:right}.ui.card [class*="left aligned"],.ui.cards>.card [class*="left aligned"]{text-align:left}.ui.card [class*="center aligned"],.ui.cards>.card [class*="center aligned"]{text-align:center}.ui.card [class*="right aligned"],.ui.cards>.card [class*="right aligned"]{text-align:right}.ui.card .content img,.ui.cards>.card .content img{display:inline-block;vertical-align:middle;width:''}.ui.card .avatar img,.ui.card img.avatar,.ui.cards>.card .avatar img,.ui.cards>.card img.avatar{width:2em;height:2em;border-radius:500rem}.ui.card>.content>.description,.ui.cards>.card>.content>.description{clear:both;color:rgba(0,0,0,.68)}.ui.card>.content p,.ui.cards>.card>.content p{margin:0 0 .5em}.ui.card>.content p:last-child,.ui.cards>.card>.content p:last-child{margin-bottom:0}.ui.card .meta,.ui.cards>.card .meta{font-size:1em;color:rgba(0,0,0,.4)}.ui.card .meta *,.ui.cards>.card .meta *{margin-right:.3em}.ui.card .meta:last-child,.ui.cards>.card .meta:last-child{margin-right:0}.ui.card .meta [class*="right floated"],.ui.cards>.card .meta [class*="right floated"]{margin-right:0;margin-left:.3em}.ui.card>.content a:not(.ui),.ui.cards>.card>.content a:not(.ui){color:'';-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.content a:not(.ui):hover,.ui.cards>.card>.content a:not(.ui):hover{color:''}.ui.card>.content>a.header,.ui.cards>.card>.content>a.header{color:rgba(0,0,0,.85)}.ui.card>.content>a.header:hover,.ui.cards>.card>.content>a.header:hover{color:#1e70bf}.ui.card .meta>a:not(.ui),.ui.cards>.card .meta>a:not(.ui){color:rgba(0,0,0,.4)}.ui.card .meta>a:not(.ui):hover,.ui.cards>.card .meta>a:not(.ui):hover{color:rgba(0,0,0,.87)}.ui.card>.button,.ui.card>.buttons,.ui.cards>.card>.button,.ui.cards>.card>.buttons{margin:0 -1px;width:calc(100% + 2px)}.ui.card .dimmer,.ui.cards>.card .dimmer{background-color:'';z-index:10}.ui.card>.content .star.icon,.ui.cards>.card>.content .star.icon{cursor:pointer;opacity:.75;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.content .star.icon:hover,.ui.cards>.card>.content .star.icon:hover{opacity:1;color:#ffb70a}.ui.card>.content .active.star.icon,.ui.cards>.card>.content .active.star.icon{color:#ffe623}.ui.card>.content .like.icon,.ui.cards>.card>.content .like.icon{cursor:pointer;opacity:.75;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.content .like.icon:hover,.ui.cards>.card>.content .like.icon:hover{opacity:1;color:#ff2733}.ui.card>.content .active.like.icon,.ui.cards>.card>.content .active.like.icon{color:#ff2733}.ui.card>.extra,.ui.cards>.card>.extra{max-width:100%;min-height:0!important;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;border-top:1px solid rgba(0,0,0,.05)!important;position:static;background:0 0;width:auto;margin:0;padding:.75em 1em;top:0;left:0;color:rgba(0,0,0,.4);box-shadow:none;-webkit-transition:color .1s ease;transition:color .1s ease}.ui.card>.extra a:not(.ui),.ui.cards>.card>.extra a:not(.ui){color:rgba(0,0,0,.4)}.ui.card>.extra a:not(.ui):hover,.ui.cards>.card>.extra a:not(.ui):hover{color:#1e70bf}.ui.centered.cards{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.ui.centered.card{margin-left:auto;margin-right:auto} 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/button.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.js"></script> <div class="ui container"> <h2>Filtering</h2> <div id="filters" class="ui buttons"> <button class="ui button active" data-filter="*">All</button> <button class="ui button" data-filter=".metal">Metal</button> <button class="ui button" data-filter=".transition">Transition</button> <button class="ui button" data-filter=".noble-gas">Noble gaz</button> </div> <div class="ui divider"></div> <h2>Sorting</h2> <div id="sorts" class="ui buttons"> <button class="ui button active" data-sort-by="original-order">Original order</button> <button class="ui button" data-sort-by="number">Likes</button> <button class="ui button" data-sort-by="name">Name</button> </div> <div class="ui divider"></div> <div class="segment"> <div class="ui fluid cards isotope"> <div class="ui fluid card element-item transition metal" data-category="transition"> <div class="content"> <i class="right floated like icon"></i> <i class="right floated star icon"></i> <div class="header name">A</div> <div class="description"> <p></p> </div> </div> <div class="extra content"> <span class="left floated like"> <i class="like icon"></i> <span class="number">31</span> Like </span> <span class="right floated star"> <i class="star icon"></i> Favorite </span> </div> </div> <div class="ui fluid card element-item transition lanthanoid metal inner-transition " data-category="lanthanoid"> <div class="content"> <i class="right floated like icon"></i> <i class="right floated star icon"></i> <div class="header name">D</div> <div class="description"> <p></p> </div> </div> <div class="extra content"> <span class="left floated like"> <i class="like icon"></i> <span class="number">34</span> Like </span> <span class="right floated star"> <i class="star icon"></i> Favorite </span> </div> </div> <div class="ui fluid card element-item transition metal" data-category="transition"> <div class="content"> <i class="right floated like icon"></i> <i class="right floated star icon"></i> <div class="header name">H</div> <div class="description"> <p></p> </div> </div> <div class="extra content"> <span class="left floated like"> <i class="like icon"></i> <span class="number">36</span> Like </span> <span class="right floated star"> <i class="star icon"></i> Favorite </span> </div> </div> <div class="ui fluid card element-item lanthanoid metal inner-transition " data-category="lanthanoid"> <div class="content"> <i class="right floated like icon"></i> <i class="right floated star icon"></i> <div class="header name">E</div> <div class="description"> <p></p> </div> </div> <div class="extra content"> <span class="left floated like"> <i class="like icon"></i> <span class="number">63</span> Like </span> <span class="right floated star"> <i class="star icon"></i> Favorite </span> </div> </div> <div class="ui fluid card element-item noble-gas nonmetal " data-category="noble-gas"> <div class="content"> <i class="right floated like icon"></i> <i class="right floated star icon"></i> <div class="header name">J</div> <div class="description"> <p></p> </div> </div> <div class="extra content"> <span class="left floated like"> <i class="like icon"></i> <span class="number">23</span> Like </span> <span class="right floated star"> <i class="star icon"></i> Favorite </span> </div> </div> <div class="ui fluid card element-item transition metal" data-category="transition"> <div class="content"> <i class="right floated like icon"></i> <i class="right floated star icon"></i> <div class="header name">B</div> <div class="description"> <p></p> </div> </div> <div class="extra content"> <span class="left floated like"> <i class="like icon"></i> <span class="number">86</span> Like </span> <span class="right floated star"> <i class="star icon"></i> Favorite </span> </div> </div> <div class="ui fluid card element-item lanthanoid metal inner-transition " data-category="lanthanoid"> <div class="content"> <i class="right floated like icon"></i> <i class="right floated star icon"></i> <div class="header name">Z</div> <div class="description"> <p></p> </div> </div> <div class="extra content"> <span class="left floated like"> <i class="like icon"></i> <span class="number">45</span> Like </span> <span class="right floated star"> <i class="star icon"></i> Favorite </span> </div> </div> </div> </div> </div>