Как избавиться от эффекта сбоя jquery?

Я использую анимацию jquery для увеличения ширины и высоты div. Анимация запускается при нажатии на поле, а затем возвращается к исходному размеру при нажатии на появившуюся иконку с задним шрифтом.

HTML:

<body>
<div class="flex-container">
        <div class="flex-items">
    <i class="fa fa-reply fa-2x"></i>1
</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>2</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>3</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>4</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>5</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>6</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>7</div>
        <div class="flex-items"><i class="fa fa-reply fa-2x"></i>8</div>
    </div>
</body>

CSS:

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: lightblue;
}
.flex-container{
    display: flex;
    width: 90vw;
    margin: 0 auto;
    flex-flow: row wrap;
    justify-content: center;
    margin-top: 20px;
}
.flex-items{
    width: 350px;
    height: 350px;
    border: 1px solid black;
    order: 1;
}
i{
    visibility: hidden;
    float: right;
}
.header{
    height: 50px;
    background-color: #333;
}
.headerText{
    margin-left: 40px;
    color: white;
}

JQuery:

$(document).ready(function(){
    $(".flex-items").click(function(){
        console.log(this.css);
        $(this)
        .animate({
            width: '100vw',
            height: '100vh'},{
            duration: 300,
            ease: "slow"})  
        .css("order", "0");

        i = $(this).children();
        $(i).css("visibility" ,"initial");
    });
    $("i").click(function(evt){
            evt.stopPropagation();
            $(".flex-items").animate({
            width: '300px',
            height: '300px'},{
            duration: 300,
            ease: "linear"})
            .css("order", "1");
            $(this).css("visibility" ,"hidden");
    });
});

Существует эффект «глючного» типа, который возникает, когда вы закрываете div, и он возвращается в исходное состояние. Есть ли способ сделать этот переход более плавным?

Codepen


animation html jquery css
person Froy    schedule 15.03.2016    source источник
comment
См. эти ответы: flexbox">stackoverflow.com/questions/29625037/   -  person Christian Bonato    schedule 15.03.2016
comment
Я думаю, это происходит потому, что вы настраиваете несколько значений, которые сильно влияют на макет страницы. Я думаю, что решение может включать в себя немедленное изменение технического макета, а затем постепенное изменение видимого фактора макета. Например, у вас может быть контейнер с рамкой, которая сразу же получает новую высоту, но содержимое увеличивается из маленького состояния. Обратите внимание, что любые многострочные абзацы могут в конечном итоге корректироваться несколько раз, если они также масштабируются.   -  person Katana314    schedule 15.03.2016
comment
@ChristianBonato это именно то, что я искал. Сначала я пытался использовать flex-grow, но безуспешно. Спасибо!   -  person Froy    schedule 15.03.2016

Ответы (2)


arrow_upward
1
arrow_downward

Не будем забывать, что flexbox'ы также могут быть переведены с помощью transform:translate3d([whatever vertical], [whatever horizontal], [set to 0 to make sure we're requiring GPU through "3d"]), предоставляя вам доступ к сложным сеткам flexbox, где некоторые flex-панели могут быть эластичными и, следовательно, сжиматься/расти, а другие могут скользить поверх/под другими flex-панелями (с небольшой помощью от z-index).

person Christian Bonato    schedule 15.03.2016

arrow_upward
0
arrow_downward

Используйте переходы css, в большинстве случаев они более плавные. transition:all 0.3s ease; Мой пример нуждается в некоторых доработках, но он помогает Codepen

person Reyno    schedule 15.03.2016