Question

因此，我试图在单击按钮时进行过渡。它应该在主div旁边缓慢弹出，但问题是当再次单击按钮后再次淡入时，它不会延迟淡入。它只有回来没有延迟。

我不透明地尝试了一下，但它也没有用，我也做了一些测试，但可以弄清楚。

对不干净的代码表示抱歉。不久前从编码开始，一直在测试一些东西。谢谢你的每一个答复。这也是我的第一个问题，很抱歉如果我犯了一些错误。

这是我尝试执行的代码段。

如果代码片段不够用，这里是指向Codepen上整个内容的链接：https://codepen.io/ViteZ/pen/abzrjKJ

HTML

const
    // main data
    productData = [{ productId: 1000, productName: 'Product 1000' }, { productId: 1001, productName: 'Product 1001' }],
    stockData = [{ productId: 1000, locationId: 1, stock: 21 }, { productId: 1000, locationId: 2, stock: 8 }, { productId: 1001, locationId: 1, stock: 4 }, { productId: 1001, locationId: 2, stock: 10 }],
    locationData = [{ locationId: 1, locationName: 'Location 1' }, { locationId: 2, locationName: 'Location 2' }],

    // maps as helpers
    locations = new Map(locationData.map(({ locationId, locationName }) => [locationId, locationName])),
    products = new Map(productData.map(({ productId, productName }) => [productId, { productName, stock: { total: 0, detail: [] } }])),
    details = new Map,

    // literally the result
    result = Array.from(products.values());

stockData.forEach(({ productId, locationId, stock }) => {
    var product = products.get(productId),
        detailKey = `${productId}|${locationId}`,
        detail = details.get(detailKey);

    if (!detail) {
        detail = { locationName: locations.get(locationId), stock: 0 };
        details.set(detailKey, detail);
        product.stock.detail.push(detail);
    }

    detail.stock += stock;
    product.stock.total += stock;
});

console.log(result);

CSS

.as-console-wrapper { max-height: 100% !important; top: 0; }

JS

<div id="wrapper">
        <div id="weatherLayout">
            <button id="detailsButton1" class="button">
                <img id="imgRotate" src="/icon_doppeltRunter.png">
            </button>
        </div>

        <div id="detailsLayout">
            <button id="detailsButton2" class="button">
                <img id="imgRotate2" src="/icon_doppeltRunter.png">
            </button>
            <p>dsfdsfdsf

            </p>
        </div>
    </div>

Answer 1

我使它更简单一些，但希望您能理解。

html：

<div id="wrapper">
        <div id="weatherLayout">
            <button id="detailsButton1"class="button"><span>Button<span></button>
        </div>

        <div id="detailsLayout">
            <p>test</p>
        </div>
    </div>

css：

#wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


#weatherLayout {
    height: 400px;
    width: 300px;
    background-image: linear-gradient(to bottom, #82C7F2, #AE8FDD);
    float: left;
    border-radius: 8%;
}

#detailsButton1 {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    float: right;
    margin-top: 330px;
}

.button {
    background-color: #A37AD0;
    border: none;
    width: 50px;
    height: 30px;
}

#detailsLayout {
    background-image: linear-gradient(to bottom, #B5DFEF, #C5B2E7);
    width: 0px;
    height: 320px;
    margin-left: 300px;
    margin-top: 40px;
    border-top-right-radius: 8%;
    border-bottom-right-radius: 8%;
    transition: width .5s ease;
}

#detailsLayout.open {
  width: 250px;
}

#detailsButton1.active {
  transform: translateX(100%);
  border-radius: 0 8% 8% 0;
}

jQuery：

$('#detailsButton1').click(function(){
  if(!$(this).hasClass('active')) {
    $('#detailsLayout').addClass('open');
    $(this).addClass('active'); 
  } else {
    $('#detailsLayout').removeClass('open');
    $(this).removeClass('active');
  }
});

单击按钮时在jquery中进行过渡

1 个答案: