Блог

В настоящее время я пытаюсь придать моим модальным (ым) анимациям анимацию при нажатии кнопки. Это код, который я нашел 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;
}