javascript - 使用 vanilla JS 单击时不会触发模态动画
问题描述
我目前正在尝试在单击按钮时为我的模式提供动画。这是我找到的代码https://codepen.io/designcouch/pen/obvKxm,我想复制名为sketch的动画
我已经将它应用到我的代码中,当然有点不同,因为在此之前我已经设置了我的模态,所以我猜我错过了一些小东西,但我似乎无法指出它,这就是我需要的原因你的帮助。
抱歉,代码很长,这个例子是必要的。请在评论模态动画下找到与该动画相关的JS中的代码。
<!-- modal -->
<div id="modal-container">
<div id="trip-modal-background" class="modal-background">
<div id="trip-modal-content" class="modal">
<button class="trip-modal-close">CLOSE</button>
<!-- for modal animation -->
<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
</svg>
<p class="fullDescription"></p>
<div id="timelineArea">
<div id="timelineGallery"></div>
<div class="vl">
<svg id="lineSvg"</svg>
</div>
</div>
</div>
</div>
function fetchData() {
fetch("http://pbstyle.dk/wpinstall/wordpress/wp-json/wp/v2/trips")
.then(res => res.json())
.then(showTrips);
}
function showTrips(trips) {
// 1. template clones
const tripTemplate = document.querySelector(".tripTemplate").content;
const tripArea = document.querySelector("#tripArea");
trips.forEach((oneTrip) => {
const tripCopy = tripTemplate.cloneNode(true);
//modal content
tripCopy.querySelector(".readMoreTrip").addEventListener("click", function(){
/* modal animation */
let buttonId = this.getAttribute("id");
document.querySelector("#modal-container").classList.add(buttonId);
document.body.classList.add("modal-active");
const readMoreModal = document.querySelector("#trip-modal-background");
readMoreModal.classList.add("showModal");
//Prevent Body scroll
document.body.style.overflow = "hidden";
document.body.style.height = "100%";
readMoreModal.querySelector(".fullDescription").textContent = oneTrip.full_description;
// Gallery timeline
readMoreModal.querySelector("#timelineGallery").innerHTML = oneTrip.content.rendered;
});
tripCopy.querySelector(".trip-modal-close").addEventListener("click", function(){
/* modal animation */
this.classList.add("out");
document.body.classList.remove("modal-active");
const readMoreModal = document.querySelector("#trip-modal-background");
readMoreModal.classList.remove("showModal");
//Allow body scroll
document.body.style.overflow = "auto"; // ADD THIS LINE
document.body.style.height = "auto";
});
tripArea.appendChild(tripCopy);
})
}
html.modal-active,
body.modal-active {
overflow: hidden;
}
#modal-container {
position: fixed;
display: table;
height: 100%;
width: 100%;
top: 0;
left: 0;
transform: scale(0);
z-index: 1;
}
#modal-container#sketch {
transform: scale(1);
}
#modal-container#sketch .modal-background {
background: rgba(0, 0, 0, 0);
animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container#sketch .modal-background .modal {
background-color: transparent;
animation: modalFadeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container#sketch .modal-background .modal {
opacity: 0;
position: relative;
animation: modalContentFadeIn 0.5s 1s cubic-bezier(0.165, 0.84, 0.44, 1)
forwards;
}
#modal-container#sketch .modal-background .modal .modal-svg rect {
animation: sketchIn 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container#sketch.out {
animation: quickScaleDown 0s 0.5s linear forwards;
}
#modal-container#sketch.out .modal-background {
animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container#sketch.out .modal-background .modal {
animation: modalFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container#sketch.out .modal-background .modal .modal-svg rect {
animation: sketchOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
@keyframes fadeIn {
0% {
background: rgba(0, 0, 0, 0);
}
100% {
background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeOut {
0% {
background: rgba(0, 0, 0, 0.7);
}
100% {
background: rgba(0, 0, 0, 0);
}
}
@keyframes quickScaleDown {
0% {
transform: scale(1);
}
99.9% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes sketchIn {
0% {
stroke-dashoffset: 778;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes sketchOut {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 778;
}
}
@keyframes modalFadeIn {
0% {
background-color: transparent;
}
100% {
background-color: white;
}
}
@keyframes modalFadeOut {
0% {
background-color: white;
}
100% {
background-color: transparent;
}
}
@keyframes modalContentFadeIn {
0% {
opacity: 0;
top: -20px;
}
100% {
opacity: 1;
top: 0;
}
}
@keyframes modalContentFadeOut {
0% {
opacity: 1;
top: 0px;
}
100% {
opacity: 0;
top: -20px;
}
}
#modal-container .modal-background {
display: table-cell;
background: rgba(0, 0, 0, 0.8);
text-align: center;
vertical-align: middle;
}
#modal-container .modal-background .modal {
background: white;
padding: 50px;
display: inline-block;
border-radius: 3px;
font-weight: 300;
position: relative;
}
#modal-container .modal-background .modal .modal-svg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 3px;
}
#modal-container .modal-background .modal .modal-svg rect {
stroke: #fff;
stroke-width: 2px;
stroke-dasharray: 778;
stroke-dashoffset: 778;
}
解决方案
推荐阅读
- sql-server - 导入不带空列的 SQL Server 数据库
- swift - 如何检查时钟在两个日期之间显示整小时的次数?
- java - 扫描器 nextInt() 在 for 循环中
- ios - 苹果拒绝了该应用程序,因为测试版应用内购买
- azure-pipelines - 将计划构建添加到构建配置
- amazon-web-services - 切换 Redshift WLM 参数组
- qt - 为什么 QThread 中有 try-catch 块?
- github - Github 拉取请求未触发 TeamCity
- linux - 即使系统时区是 IST,播放框架日志也是 UTC
- python - 使用numpy fromfile读取数据后如何跳过字节