个人中心
gpt4 book ai didi

javascript - 如何使用 CSS 和 JS 一次为多个模态添加进出过渡效果？

转载 作者：行者123 更新时间：2023-11-28 00:00:19 24 4
gpt4 key购买 nike

第一次发帖，所以希望它足够清楚。

我的任务是创建一个模态对象，该对象覆盖页面上的多列/行网格布局。模态应该出现在特定网格元素的悬停上。当模态出现时，网格区域的背景应该变暗。我被要求不要使用任何额外的库(例如 jQuery)。

为了完成这项任务，我添加了两个模态对象，一个用于实际模态窗口，另一个用于调光器对象。我无法让 CSS 悬停在相关元素的悬停上对两个对象都起作用，所以我使用 JavaScript 来添加 CSS 更改。

过渡效果适用于过渡效果，但不适用于过渡效果。我想我对这项任务想得太多了，所以感谢任何建议。

<style type="text/css">

    .container {
        width: 100vw;
        height: 100vh;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-gap: 10px;
        margin: 0;
        padding: 0;
    }

    .column {
        background-color: hsl(0,80%,70%);
    }

    #modal_maker {
        font-size: 5vw;
        height: 100%; 
        width:100%;
        display:flex;
        align-items: center;
        justify-content: center;
    }

    #modal_maker, #modal {
        z-index: 2;
    }

    #modal {
        visibility: hidden;

        background-color: hsl(200,50%,70%);

        width: 80%;
        height: 80%;

        position: absolute;

        margin: auto;

        top: 0; left: 0; bottom: 0; right: 0;

        opacity: 0;
        transition: opacity 1s;
    }

    #background-dimmer {
        visibility: hidden;

        background-color: black;

        width: 100%;
        height: 100%;

        position: absolute;

        z-index: 1;

        opacity: 0;
        transition: opacity 0.5s;
    }

</style>

<body>
<div class="container">

    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column" id="modal_maker">Hover Here</div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>

    <div id="modal"></div>
    <div id="background-dimmer"></div>

</div>

<script type="text/javascript">

document.querySelector(".container").addEventListener("mouseover", function(el) {
        if (el.target.id=="modal_maker" || el.target.id=="modal") {

            document.getElementById("modal").style.cssText = "visibility:visible; opacity: 1;"
            document.getElementById("background-dimmer").style.cssText = "visibility:visible; opacity: 0.75;"
        } else {
            document.querySelectorAll("#modal, #background-dimmer").forEach(x => x.style.cssText="opacity: 0; visibility:hidden;")
        }
    })

</script>
</body>

最佳答案

都是因为visibility:hidden

在 js 中

...
} else {
        document.querySelectorAll("#modal, #background-dimmer").forEach(x => x.style.cssText="opacity: 0; visibility:hidden;")
}
...

您可以立即将 opacity 更改为 0，还可以将 visibility:hidden 更改为因此没有时间进行转换，在代码触发时立即元素隐藏。

您使用 cssText 更改元素的属性，因此当您将鼠标移到另一个元素上时 visibility:visible 不会出现，而是会有 visibility:hidden 从 css(所以你也需要删除它)。

我知道它会导致 #modal 捕获鼠标悬停事件...这就是要解决的问题

我不知道这个解决方案是否是故意在你 mouseover 其他元素时隐藏模态，如果我将鼠标完全离开表格，模态将保留......只是想提一下也许它不相关。

我根据你的代码做了 fiddle :https://jsfiddle.net/svh6dpfk/1/

修复此#modal 捕获事件的一个想法是添加适当的可见性作为回调(有 transitionend 事件将捕获动画完成时的时刻，所以这样的事情会有所帮助:

document.querySelector("#modal, #background-dimmer").addEventListener("transitionend", function(el) {

  if(parseFloat(el.target.style.opacity) > 0){
    el.target.style.cssText = "visibility:visible;opacity:1";
    alert("animation end visible");
  }else{
    el.target.style.cssText = "visibility:hidden;opacity:0";
    alert("animation end unvisible");
  }

});

更新

它现在对我有用......

它有点棘手，你的 css 需要有 visibility:hidden 模式和背景调光器(就像你的代码一样)这似乎对我有用:

document.querySelector(".container").addEventListener("mouseover", function(el) {
    if (el.target.id=="modal_maker" || el.target.id=="modal") {

        document.getElementById("modal").style.cssText = "visibility:visible;opacity: 1;"
        document.getElementById("background-dimmer").style.cssText = "visibility:visible;opacity: 0.75;"
    } else {
        if(document.getElementById("modal").style.opacity == "1"){
        document.querySelectorAll("#modal, #background-dimmer").forEach(x => x.style.cssText="visibility:visible;opacity: 0; ")
        }
        /* alert("should be on leave") */;
    }
})

这部分 .forEach(x => x.style.cssText="visibility:visible;opacity: 0; ") 改变了，因为你的 css 总是 visibility:hidden，因此您需要始终在 visible 上执行转换。

完整示例: https://jsfiddle.net/Loary65w/1/

您需要记住拥有跨浏览器支持，您需要涵盖所有这些事件webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend

希望对您有所帮助。也许有更好的解决方案更简单，我把那个复杂化了:F

关于javascript - 如何使用 CSS 和 JS 一次为多个模态添加进出过渡效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56024196/

24 4 0
文章推荐： c++ 使用 "*"运算符没有运算符匹配这些操作数
文章推荐： str.replace 之后带有变量的 JavaScript 警报
文章推荐： javascript - 滚动到 DIV 元素的中心 - Angular 7
文章推荐： javascript - 模态对话框不适用于 bootstrap 4
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com