Question

我试图获得一种效果，当点击时显示更多内容的部分[就像图像中的红色方块]使用CSS和Javascript但不会打扰几乎所有元素＆＃34; X轴＆＃34;位置并没有静态定义列数量。到目前为止，我已经完成了将动画内容下方的块移动到右侧。有什么建议或图书馆吗？非常感谢你。

图片：https://www.dropbox.com/s/un0ta6ch5xr17nk/question.png?dl=0

编辑：

这是小提琴，展示了点击左边的元素时会发生什么：

https://jsfiddle.net/2y2vwy0b/

对应的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            position: fixed;
            height: 100%;
            width: 100%;
        }

        .container{
            width: 50%;
            height: 80%;
            margin: 0 auto;
            background: #E3DBDB;
        }

        .item{
            width: 40%;
            height: 10%;
            float: left;
            margin: 1em;
            background: #7C86C0;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }
        /*.item:nth-child(2n+1){
            float: left;
        }

        .item:nth-child(2n){
            float: right;
        }*/

        .itemActive{
            background: #a70000;
            height: 30%;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>

    <script>
        function resizeHeight( evt ) {
            evt.target.classList.toggle('itemActive');
        }

        var targets = document.getElementsByClassName('item');
        for (var i = 0; i < targets.length; i++) {
            targets[i].addEventListener("click", resizeHeight);
        }

    </script>

</body>
</html>

Answer 1

如果您不担心支持旧浏览器，那么您一定要查看CSS3 Flexbox。如果您需要针对移动设备定位不同的布局，它可以仅使用CSS3以及可能的某些媒体查询来完成您的图像所描述的内容。

在Y轴上进行动画处理，不在X轴下方移动元素

1 个答案: