为什么我的过渡动画在关闭div时会遇到麻烦？

Question

当您单击右下角的箭头时，我有一张卡片可以展开以显示更多内容。 我注意到如果我按箭头关闭额外的内容，它会在关闭之前出现轻微的故障。

看起来它首先取出填充，然后关闭整个div。 有没有办法让这个动画流畅而没有波动的动画？

这是JSFiddle

用于切换类的JavaScript。

$('.remove-text').click(function() {
        var el = event.target.parentElement;
        console.log(el);
        console.log(event.target);
        $(el).closest('.card').toggleClass('collapsed');
        if (  $( event.target).css( "transform" ) == 'none' ){
            $(event.target).css("transform","rotate(180deg)");
        } else {
            $(event.target).css("transform","" );
        }
    })

Answer 1

填充导致问题。 您可以从该元素中删除填充，并为其中一个子元素添加边距以使其具有相同的间距。

.content {
    overflow: hidden;
    display: flex;
    align-items: center;
    /* padding-top: 10px; */
    /* padding-bottom: 10px; */
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    /* padding-top: 4px; */
    /* padding-bottom: 4px; */
    max-height: 500px;
    transition: max-height 0.5s;
}
.more-horiz-col{
  margin: 20px 0px;
}

Answer 2

您正在删除填充而不添加转换 - 这会在继续动画之前产生跳跃效果（或者如您所说，“挂钩”）。 下面我在转换声明中添加了padding 0.5s 。

2旁注：

1）您不需要.collapsed .content块上的转换定义 - 该属性已从.content继承

2）你可能会注意到动画发生之前的延迟 - 这是你正在使用的max-height技巧的副作用。 降低最大高度（有可能切断内容）或尝试不同的transition-animation-function

 $(".remove-text").click(function() { var el = event.target.parentElement; $(el).closest(".card").toggleClass("collapsed"); if ($(event.target).css("transform") == "none") { $(event.target).css("transform", "rotate(180deg)"); } else { $(event.target).css("transform", ""); } }); 

 .dashboard-setup-thumb { -webkit-box-shadow: 1px 0 3px 0px rgba(0,0,0,0.20); box-shadow: 1px 0 3px 0px rgba(0,0,0,0.20); border-top-left-radius: 3px; border-bottom-left-radius: 3px; height: 98px; width: 98px; background-position:center; background-size:cover; position: relative; } .display-inline { display: inline-block; } .remove-text{ bottom: 0.5rem; right: 0.5rem; position: absolute; font-size: 0.8em; right: 0.1rem; } .checkbox-position { top: 0.8rem; right: 0rem; position:absolute; } #job-setup-qty { margin-left: 15%; padding: 0rem } .job-setup-checkbox { top: 0.8rem; right: 0rem; position:absolute; } .card-content-width { position: relative; width: 100%; padding-left: 0px !important; } .collapsed .content{ max-height: 0px; padding-top: 0px; padding-bottom: 0px; } .content { overflow:hidden; display: flex; align-items: center; padding-top: 10px; padding-bottom: 10px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; padding-top: 4px; padding-bottom: 4px; max-height: 500px; transition: max-height 0.5s, padding 0.5s; } .arrow-change { color: $link; cursor: pointer; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ -webkit-transform-origin: 50% 42%; -moz-transform-origin: 50% 42%; -o-transform-origin: 50% 42%; transform-origin: 50% 42%; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; } .more-horiz-job { color: $link; display: flex !important; justify-content: center; align-items: center; } .remove-text { display: flex; } .more-horiz-col{ margin-left: 5px !important; margin-right: 5px !important; } .view-edit-col { margin-left: 5px !important; } .card { border-radius: 3px; } .select-wrapper-qty { margin-left: -10px; } .thumbnail-icon { position: absolute; left: 7px; top: 7px; height: 2.5rem; width: 2.5rem; } .qty-div { margin-bottom: 0.7em; font-size: 1.2rem; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="row mb-0"> <div class="col s12 m12 l12 p-0"> <div class="card hoverable collapsed"> <div class="card-content card-content-width pl-0 pb-0 pt-0 row mb-0"> <div class="col s4 m4 l4 dashboard-setup-thumb display-inline" style="background-image:url({{imageSrc instruction.thumbnail}});"> <i class="dm-icons icon-dash-print thumbnail-icon"></i> <div class="material-yellow"></div> </div> <div class="col s5 m6 l6 display-inline mt-20"> <h4 class="row mb-0 mt-0 truncfunc truncate left-align tooltipped" data-position="top" data-delay="50" data-tooltip="{{instruction.name}}"></h4> <h5 class="row mb-10 mt-5 truncate status-instruction">Setup for printing.</h5> <div class="row mb-0 align-down {{#unless isSelected}}hide{{/unless}}"> <div class="col s3 m3 l6 p-0 align-down"> <div class="p-0 qty-div">QTY</div> </div> <div id="job-setup-qty" class="js-job-number input-field col s3 m4 l4 mb-0"> <label></label> </div> </div> </div> <div class="col s3 m3 l1"> <form class="display-inline job-setup-checkbox"><p> <input type="checkbox" class="filled-in" {{isChecked}} id="{{pageTitle}}_{{instruction._id}}" /> <label class="pl-26" for="{{pageTitle}}_{{instruction._id}}"></label> </p> </form> <div class="display-inline remove-text" href="#"> <i class="material-icons medium-3-rem arrow-change">expand_more</i> </div> </div> </div> <div class="content dm-gray light"> <div class="col s1 m1 l1 more-horiz-col"> <i class="material-icons medium-3-rem more-horiz-job">more_horiz</i></div> <div class="col s4 m4 l4 view-edit-col"> <div class="label dis-inline view-edit">View/Edit</div> </div> <div class="col s4 m4 l4 pr-2"> <div class="dis-inline right delete-div label">DELETE<i class="material-icons medium-3-rem dis-inline">delete</i></div> </div> </div> </div> </div> </div>