主页 / 问题 / 1587402
Accepted
Dmitrii
Asked:2024-07-17 14:47:34 +0000 UTC2024-07-17 14:47:34 +0000 UTC

动画，先偏移，再增加宽度

  • 772

    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 编写的......

javascript

1 个回答

  1. Best Answer

    这似乎是你所需要的，只需 margin-left: -(Element width) ，然后使用 .show 类设置 margin-left: 0
    在框中我插入了 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>

    • 0

相关问题