css 点击每一行时的过渡

Question

我想要的是，当单击行时会生成过渡。.不仅是第一次单击。我已经尝试过了，但它不起作用...问题是它只在第一次点击时转换，我不希望那样。

这是我的代码：

let table = document.querySelectorAll(".table-row");
let derDiv = document.querySelector(".der");
let derInfoDiv = document.querySelector(".der .info");

let cont = 0;
table.forEach(tr => {
    tr.addEventListener('click', () => {

        if (cont > 0) {
            // doesn't work 
            derDiv.classList.add('auxClas');

            derInfoDiv.children[0].remove();
            derDiv.children[1].remove();

            console.log(derDiv.style.top)
            console.log(derDiv.style.display);
        }

        cont++;

        let title = tr.children[0].textContent;
        let imgSrc = tr.children[1].children[0].src;

        const img = document.createElement("img");
        img.src = imgSrc;

        const h3 = document.createElement("h3");
        h3.textContent = title;
        derDiv.appendChild(h3);
        derInfoDiv.appendChild(img);

        derDiv.style.top = 0;
    })
});

#container {
    width: 80%;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
}

.izq {
    flex-basis: 40%;
}

.der {
    flex-basis: 40%;
    display: flex;
    flex-direction: column;
    position: relative;
    top: -400px;
    transition: top 1s;
}

.info {
    flex-basis: 30%;
}

.info img {
    width: 100%;
}

.auxClas {
    flex-basis: 40%;
    display: flex;
    flex-direction: column;
    position: relative;
    top: -400px;
    transition: top 1s;
}

<div id="container">
    <!-- left -->
    <div class="izq">
        <table style="width:100%">
            <tr>
                <th>Product Name</th>
                <th>Image</th>
            </tr>
            <tr class="table-row">
                <td>Acoustic guitar</td>
                <td>
                    <img style="display:none;"
                        src="https://cdn-5bf30923f911c819844cc261.closte.com/wp-content/uploads/2018/05/Guitarra-Acustica-Cort-AD810.jpg">
                </td>
            </tr>
            <tr class="table-row">
                <td>Keyboard..</td>
                <td>
                    <img style="display:none;" src="https://m.media-amazon.com/images/I/611i09m4QUL._AC_SX679_.jpg">
                </td>
            </tr>
        </table>
    </div>

    <!-- right -->
    <div class="der">
        <div class="info">
        </div>
    </div>
</div>

我尝试更新值“top”，因为在第二次单击后该值仍然为 0。但是，不起作用。你能帮帮我吗

Answer 1

您可以尝试通过 javascript 对其进行动画处理。这是一种简单而干净的方法。我也稍微修改了你的代码，希望你喜欢：

Javascript代码

let table = document.querySelectorAll(".table-row");
let derDiv = document.querySelector(".der");
let derInfoDiv = document.querySelector(".info");

table.forEach(tr => {
    tr.addEventListener('click', () => {

        let title = tr.children[0].textContent;
        let imgSrc = tr.children[1].children[0].src;

        derDiv.children[1].textContent = title;
        derInfoDiv.children[0].src = imgSrc;
        derDiv.animate([{top: "-400px"}, {top:0}], {duration: 1000});
    })
});

样式表

#container {
    width: 80%;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
}

.izq {
    flex-basis: 40%;
}

.der {
    flex-basis: 40%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.info {
    flex-basis: 30%;
}

.info img {
    width: 100%;
}

注意：删除了一个 class，从 .der class.[=15= 中删除了 'top' 和 'transition' ]

HTML 文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div id="container">
        <!-- left -->
        <div class="izq">
            <table style="width:100%">
                <tr>
                    <th>Product Name</th>
                    <th>Image</th>
                </tr>
                <tr class="table-row">
                    <td>Acoustic guitar</td>
                    <td>
                        <img style="display:none;"
                            src="https://cdn-5bf30923f911c819844cc261.closte.com/wp-content/uploads/2018/05/Guitarra-Acustica-Cort-AD810.jpg">
                    </td>
                </tr>
                <tr class="table-row">
                    <td>Keyboard..</td>
                    <td>
                        <img style="display:none;" src="https://m.media-amazon.com/images/I/611i09m4QUL._AC_SX679_.jpg">
                    </td>
                </tr>
            </table>
        </div>
    
        <!-- right -->
        <div class="der">
            <div class="info">
                <img />
            </div>
            <h3></h3>
        </div>
    </div>
    <script src="./script.js"></script>
</body>
</html>

注意：由于删除了两个元素的 destroy 和 create 方法，将它们添加为静态（h3 和 img）。

就是这样。按需正常工作。希望这对你有帮助！ :)

如果您想了解有关 .animate() 方法的更多信息，请查看 This。

css 点击每一行时的过渡

css transition when click each row

html

javascript

css

css-transitions