使用 Semantic-ui 和 Isotope.js - 项目在转换后抖动

Question

我在与语义 UI 框架一起使用 isotope.js 时遇到了一些问题，如您所见，项目在任何转换后都是 "shaking"。

我已经阅读了那个答案isotope shakes after the transition，但它对我没有帮助

提前致谢

      $(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>

使用 Semantic-ui 和 Isotope.js - 项目在转换后抖动

Using Semantic-ui and Isotope.js - items shakes after the transition

javascript

jquery

jquery-isotope

semantic-ui