Question

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

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

用于切换类的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

您在不添加过渡的情况下删除填充 - 这会在继续动画之前产生跳跃效果（或者说，像＃34; hitch＆＃34;）。下面我已将ngOnInit(): void { this.isBusy = true; console.log("before the subscribe " + this.isBusy); this.route.params .switchMap((params: Params) => this._RequestFormService.getRequestById(+params['id'])) .subscribe( data => this.Model = data, error => console.log("Error", error), () => this.isBusy = false); this.isBusy = false; console.log(this.isBusy); this.cd.detectChanges(); // marks path }添加到转换声明中。

2旁注：

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

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

＆＃13;

max-height

＆＃13;

$(".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", "");
  }
});

＆＃13;

.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;
}

＆＃13;

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

2 个答案: