Анимация, сперва смещение, затем увеличиваем ширину

Question

    const toggle = document.querySelector("button.toggle"),
      
        box = document.querySelector(".box");
    toggle.addEventListener("click", () => {
        box.classList.add("show");
    })

        .box {height: 100px; margin:  0 auto; width: 80%;}
        .item{
            background: orange;
            height: 100%;
            animation: fade-out 0.5s forwards;
            display: none;
            width: 0px;
            margin-left:0px
        }
        .show .item { display: block;}
        
        @keyframes fade-out {
            0% {
                margin-left:100px
            }
            100% {
                width: 100px;
                display: block;
            }

    <button class="toggle">Click</button>
    <div class="box">
        <div class="item"></div>
    </div>

Как сделать, чтобы сперва выполнялось смещение, затем увеличить ширину элемента. Так, чтобы ширина увеличивалась в право, не в лево...

Второй вопрос. Сделали анимацию, путем добавления класса к родители. Как теперь при удалении класса, сделать противоположную анимацию?

В js, только добавляем класс, либо удаляем один и тот же класс. А вся анимация на css...

Answer 1

Вроде то что вам нужно, просто margin-left: -(Ширина элемента) и потом при классе .show ставим margin-left: 0
А в box я вставил overflow-x:hidden что бы исчезал блок при минусовом маржине.

const toggle = document.querySelector("button.toggle"),
      
        box = document.querySelector(".box");
    toggle.addEventListener("click", () => {
        box.classList.toggle("show");
    })

.box {height: 100px; margin:  0 auto; width: 80%;overflow-x: hidden;}
.item{
    background: orange;
    height: 100%;
    width: 100px;
    margin-left:-100px;
    transition: 0.3s;
}
.show .item {
  margin-left: 0;
}

<button class="toggle">Click</button>
    <div class="box">
        <div class="item"></div>
    </div>

БЛОГ НА HUSL

Анимация, сперва смещение, затем увеличиваем ширину

Ответы (1 шт):