У меня есть карта, которая расширяется, чтобы показать больше контента, когда вы нажимаете на стрелку в правом нижнем углу. Я заметил, что если я нажму на стрелку, чтобы закрыть дополнительный контент, то перед его закрытием возникает небольшая заминка.

Похоже, он сначала удаляет отступы, а затем закрывает весь 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","" );
        }
    })
1
RP12 24 Апр 2017 в 18:42

2 ответа

Лучший ответ

Вы удаляете отступы без добавления перехода - это дает эффект прыжка (или, как вы говорите, «заминка») перед продолжением анимации. Ниже я добавил padding 0.5s к объявлению перехода.

2 примечания стороны:

1) вам не нужно определение перехода в вашем блоке .collapsed .content - это свойство уже унаследовано от .content

2) вы можете заметить задержку перед анимацией - это побочный эффект от трюка max-height, который вы используете. Уменьшите максимальную высоту (рискует отрезать контент) или попробуйте другую

$(".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 m-b-0">
        <div class="col s12 m12 l12 p-0">
            <div class="card hoverable collapsed">
                <div class="card-content card-content-width p-l-0 p-b-0 p-t-0 row m-b-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 m-t-20">
                        <h4 class="row m-b-0 m-t-0 truncfunc truncate left-align tooltipped" data-position="top" data-delay="50" data-tooltip="{{instruction.name}}"></h4>
                        
                            <h5 class="row m-b-10 m-t-5 truncate status-instruction">Setup for printing.</h5>
                        
                            <div class="row m-b-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 m-b-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="p-l-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 p-r-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>
1
Sandy Gifford 24 Апр 2017 в 16:02

Заполнение вызывает проблему. Вы можете удалить отступы из этого элемента и добавить поля к одному из его дочерних элементов, чтобы иметь одинаковый интервал.

.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;
}
2
Hari Das 24 Апр 2017 в 16:01
43592416