Masonry JS가 CSS 전환을 무시합니다.

클릭하면 div에서 높이를 변경하는 중 현재 문제가 있습니다. 카드 레이아웃을 표시하고 클릭에 대한 자세한 정보를 표시하기 위해 카드를 확장하기 위해 석조물과 부트 스트랩을 사용하지만 행이 아닌 열 내에서만 카드를 이동합니다. CSS로 전환 효과를 추가하려고 시도했을 때 무시되고 div는 '.open'클래스에서 새 높이 만 전환합니다. 도움을 주셔서 감사합니다! 여기 Masonry JS가 CSS 전환을 무시합니다.

참조 용 프로젝트의 Codepen이다 https://codepen.io/silasisland/pen/YrXPov

HTML

<main> 
    <section id="wrapper"> 

     <div class="row grid"> 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override"> 
       <div class="card"> 
        <div class="card-header"> 
         <div class="customer-name"> 
          <h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3> 
         </div> 
         <div class="card-tools"> 

          <button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button> 
          <button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button> 
          <button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button> 
         </div> 
        </div> 
        <div class="card-body"> 
         <div class="card-summary"> 
          <span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override"> 
       <div class="card"> 
        <div class="card-header"> 
         <div class="customer-name"> 
          <h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3> 
         </div> 
         <div class="card-tools"> 

          <button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button> 
          <button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button> 
          <button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button> 
         </div> 
        </div> 
        <div class="card-body"> 
         <div class="card-summary"> 
          <span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override"> 
       <div class="card"> 
        <div class="card-header"> 
         <div class="customer-name"> 
          <h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3> 
         </div> 
         <div class="card-tools"> 

          <button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button> 
          <button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button> 
          <button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button> 
         </div> 
        </div> 
        <div class="card-body"> 
         <div class="card-summary"> 
          <span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override"> 
       <div class="card"> 
        <div class="card-header"> 
         <div class="customer-name"> 
          <h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3> 
         </div> 
         <div class="card-tools"> 

          <button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button> 
          <button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button> 
          <button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button> 
         </div> 
        </div> 
        <div class="card-body"> 
         <div class="card-summary"> 
          <span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override"> 
       <div class="card"> 
        <div class="card-header"> 
         <div class="customer-name"> 
          <h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3> 
         </div> 
         <div class="card-tools"> 

          <button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button> 
          <button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button> 
          <button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button> 
         </div> 
        </div> 
        <div class="card-body"> 
         <div class="card-summary"> 
          <span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override"> 
       <div class="card"> 
        <div class="card-header"> 
         <div class="customer-name"> 
          <h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3> 
         </div> 
         <div class="card-tools"> 

          <button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button> 
          <button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button> 
          <button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button> 
         </div> 
        </div> 
        <div class="card-body"> 
         <div class="card-summary"> 
          <span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override"> 
       <div class="card"> 
        <div class="card-header"> 
         <div class="customer-name"> 
          <h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3> 
         </div> 
         <div class="card-tools"> 

          <button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button> 
          <button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button> 
          <button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button> 
         </div> 
        </div> 
        <div class="card-body"> 
         <div class="card-summary"> 
          <span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override"> 
       <div class="card"> 
        <div class="card-header"> 
         <div class="customer-name"> 
          <h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3> 
         </div> 
         <div class="card-tools"> 

          <button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button> 
          <button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button> 
          <button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button> 
         </div> 
        </div> 
        <div class="card-body"> 
         <div class="card-summary"> 
          <span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override"> 
       <div class="card"> 
        <div class="card-header"> 
         <div class="customer-name"> 
          <h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3> 
         </div> 
         <div class="card-tools"> 

          <button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button> 
          <button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button> 
          <button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button> 
         </div> 
        </div> 
        <div class="card-body"> 
         <div class="card-summary"> 
          <span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override"> 
       <div class="card"> 
        <div class="card-header"> 
         <div class="customer-name"> 
          <h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3> 
         </div> 
         <div class="card-tools"> 

          <button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button> 
          <button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button> 
          <button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button> 
         </div> 
        </div> 
        <div class="card-body"> 
         <div class="card-summary"> 
          <span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override"> 
       <div class="card"> 
        <div class="card-header"> 
         <div class="customer-name"> 
          <h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3> 
         </div> 
         <div class="card-tools"> 

          <button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button> 
          <button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button> 
          <button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button> 
         </div> 
        </div> 
        <div class="card-body"> 
         <div class="card-summary"> 
          <span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override"> 
       <div class="card"> 
        <div class="card-header"> 
         <div class="customer-name"> 
          <h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3> 
         </div> 
         <div class="card-tools"> 

          <button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button> 
          <button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button> 
          <button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button> 
         </div> 
        </div> 
        <div class="card-body"> 
         <div class="card-summary"> 
          <span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override"> 
       <div class="card"> 
        <div class="card-header"> 
         <div class="customer-name"> 
          <h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3> 
         </div> 
         <div class="card-tools"> 

          <button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button> 
          <button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button> 
          <button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button> 
         </div> 
        </div> 
        <div class="card-body"> 
         <div class="card-summary"> 
          <span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override"> 
       <div class="card"> 
        <div class="card-header"> 
         <div class="customer-name"> 
          <h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3> 
         </div> 
         <div class="card-tools"> 

          <button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button> 
          <button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button> 
          <button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button> 
         </div> 
        </div> 
        <div class="card-body"> 
         <div class="card-summary"> 
          <span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 
</main>

CSS

main{ 
    position: relative; 
    padding-top: 50px; 
    background-color: gray; 
    min-height: 100%; 
} 
#wrapper{ 
     padding-left: 10px; 
     padding-right: 10px; 
} 

.col-override{ 
    padding: 10px; 
    margin: 0; 
} 
.grid { 
    height: auto; 
    margin: 10px 0; 
} 
.grid .card { 
    margin: 0; 
    background: #FFFFFF; 
    width: 100%; 
    cursor: pointer; 
    float: left; 
    border: #ddd; 
    vertical-align: top; 
    box-shadow: 0, 1px, 1px, rgba(0, 0, 0, 0.05); 
} 
.grid .card.open { 
    transition: height 0.8s linear; 
    -webkit-transition: height 0.8s linear; 
    height: 350px; 
} 
.grid .card .card-header { 
    position: relative; 
    padding: 10px 20px; 
    border-bottom: 1px solid #eee; 
    box-shadow: 0, 3px, 1px, rgba(0, 0, 0, 0.025); 
} 
.grid .card .card-header .customer-name { 
    padding-right: 60px; 
} 
.grid .card .card-header .customer-name h3 { 
    font-size: 14px; 
    font-size: 14px; 
    margin: 0px; 
    font-weight: bold; 
    color: blue; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
.grid .card .card-header .card-tools { 
    position: absolute; 
    right: 10px; 
    top: 2px; 
    text-align: right; 
    white-space: nowrap; 
} 
.grid .card .card-header .card-tools .btn { 
    color: blue; 
    padding: 0px 3px; 
} 
.grid .card .card-header .card-tools .btn.card-toggle { 
    font-size: 20px; 
} 
.grid .card .card-header .card-tools .btn:focus { 
    outline: none; 
} 
.grid .card .card-header .card-tools .btn .openState { 
    -webkit-transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    transform: rotate(180deg); 
} 
.grid .card .card-body .card-summary { 
    padding: 10px 20px; 
} 
.grid .card .card-body .card-summary .card-label { 
    color: blue; 
    font-size: 14px; 
}

$(document).ready(function() { 

    var $grid = $('.grid').masonry({ 
    itemSelector: '.col-override', 
    horizontalOrder: true, 
    transitionDuration: '0.8s', 
    }); 

    $grid.on('click', '.card', function() { 
    $(this).toggleClass('gigante'); 
    // trigger layout after item size changes 
    $grid.masonry('layout'); 
    }); 


    // Open & Close Cards 
    $('.card-body').click(function() { 
    $(this).parent().toggleClass('open'); 
    $(this).parent().find('.card-header .card-tools .btn.card-toggle i').toggleClass('openState'); 
    }); 

});

출처

2017-09-14 Stolve

난 당신이 찾고있는 무엇을 아주 확실하지 않다하지만 전환을 트리거하고 아이콘을 전환 카드의 어떤 부분에 클릭을 원하는 경우,이 시도 :

$(document).ready(function() { 

var $grid = $('.grid').masonry({ 
itemSelector: '.col-override', 
horizontalOrder: true, 
transitionDuration: '0.8s', 
}); 

$grid.on('click', '.card', function() { 
$(this).toggleClass('open'); 
$(this).find('.card-header .card-tools .btn.card-toggle i').toggleClass('openState'); 
// trigger layout after item size changes 
$grid.masonry('layout'); 
}); 
});

출처

2017-09-20 01:46:02 Macsupport

Masonry JS가 CSS 전환을 무시합니다.

답변

관련 문제