css - 将 :nth-child 选择器与 CSS 网格一起使用会产生意想不到的行为

问题描述

我正在使用 CSS 网格来定位元素并具有淡入效果。但是在将文本放置在图像下方并使用 :nth-child() CSS 属性选择每个 h4 标记后，导致第 4 和第 5 图像没有显示（因为它们的不透明度没有改变）。我猜，nth-child 选择网格中的第一个 5 个元素，不管它是否是 h4。
请提出我错在哪里。
这是 JSFiddle 的链接：- https://jsfiddle.net/aew2tjhr/1/
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
    <style>
        .container {
            margin-top: 500px;
        }

        .working-process {
            background-color: #000;
        }

        .working-process h2 {
            color: #fff;
            margin-bottom: 4rem;
        }

        .emphasize {
            color: #ff7810;
        }


        .single-work {
            display: grid;
            grid-template-columns: repeat(5, 200px);
            grid-template-rows: 150px;
            grid-auto-rows: 150px;
            justify-content: center;
        }

        .single-work h4 {
            color: #000;
            grid-row: 2/3;
        }

        .single-work-icon {
            position: relative;
            height: 120px;
            width: 120px;
            border: 1px solid #ff7810;
            background-color: #e49152;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-basis: 120px;
            margin-right: 4rem;
        }

        .single-work-icon:not(:nth-child(5))::after {
            content: " ";
            position: absolute;
            top: 50%;
            left: 50%;
            border-right: 70px solid #fff;
            width: 70px;
            height: 2px;
        }

        .single-work,
        .single-work>.single-work-icon {
            opacity: 0;
        }

        .single-work.show {
            animation: showWorks 1s ease-in-out 0.5s forwards;
        }

        .single-work.show>.single-work-icon:nth-child(1) {
            animation: showWorks 1s ease-in-out 0.5s forwards;
        }

        .single-work.show>.single-work-icon:nth-child(2) {
            animation: showWorks 1s ease-in-out 1.5s forwards;
        }

        .single-work.show>.single-work-icon:nth-child(3) {
            animation: showWorks 1s ease-in-out 2.5s forwards;
        }

        .single-work.show>.single-work-icon:nth-child(4) {
            animation: showWorks 1s ease-in-out 3.5s forwards;
        }

        .single-work.show>.single-work-icon:nth-child(5) {
            animation: showWorks 1s ease-in-out 4.5s forwards;
        }

        .single-work.show .single-work-icon:nth-child(1)::after {
            animation: slideInRight 2s ease-in-out 0s forwards;
        }

        .single-work.show .single-work-icon:nth-child(2)::after {
            animation: slideInRight 1s ease-in-out 2s forwards;
        }

        .single-work.show .single-work-icon:nth-child(3)::after {
            animation: slideInRight 1s ease-in-out 3s forwards;
        }

        .single-work.show .single-work-icon:nth-child(4)::after {
            animation: slideInRight 1s ease-in-out 4s forwards;
        }

        @keyframes showWorks {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes showArrows {
            0% {
                opacity: 0;
                transform: translateX(0);
            }

            100% {
                opacity: 1;
                transform: translateX(100%);
            }
        }

        @keyframes slideInRight {
            0% {
                left: 50%;
            }

            100% {
                left: 100%;
            }
        }
    </style>
</head>

<body>
    <section class="pos-r working-process">
        <div class="container">
            <h2 class="text-center">How <span class="emphasize">Digital Marketing Agency</span> work</h2>
            <div class="row">
                <div class="col-lg-12 col-md-12 ml-auto md-mt-5">
                    <div class="single-work">
                        <div class="single-work-icon">
                            <img src="img/working_process/research.png" alt="Research" />
                        </div>

                        <h4>Research</h4>

                        <div class="single-work-icon">
                            <img src="img/working_process/design.png" alt="Design" />
                        </div>

                        <h4>Design</h4>

                        <div class="single-work-icon">
                            <img src="img/working_process/Implement.png" alt="Implement" />
                        </div>

                        <h4>Implement</h4>

                        <div class="single-work-icon">
                            <img src="img/working_process/measure.png" alt="Measure" />
                        </div>

                        <h4>Measure</h4>

                        <div class="single-work-icon">
                            <img src="img/working_process/result.png" alt="Result" />
                        </div>

                        <h4>Result</h4>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script>
        function isInViewport(element) {
            var elementTop = $(element).offset().top;
            var elementBottom = elementTop + $(element).outerHeight();
            var viewportTop = $(window).scrollTop();
            var viewportBottom = viewportTop + $(window).height();
            // console.log(elementTop, elementBottom, viewportTop, viewportBottom);
            return elementBottom > viewportTop && elementTop < viewportBottom;
        }

        $(window).on("resize scroll", function () {

            if (isInViewport(document.querySelector(".working-process"))) {
                document.querySelector(".single-work").classList.add("show");
            } else {
                if (
                    document.querySelector(".single-work").classList.contains("show")
                ) {
                    document.querySelector(".single-work").classList.remove("show");
                }
            }
        });

    </script>
</body>

</html>
标签： csscss-grid
css - 将 :nth-child 选择器与 CSS 网格一起使用会产生意想不到的行为

问题描述

解决方案

推荐阅读
