如何通过从左侧滚入打开模式并通过向左滚出关闭模式？

Question

当我单击导航 link（联系人）时，我希望通过从左侧滚入来打开模式。然后单击“关闭”会将模态向左滚动。我已经用动画尝试了几次迭代，我可以让模态进入，但不能推出。然后我用 JS 来切换 class。有了这个，模式滚进滚出，但如果不重新加载页面就无法重复它。我正在使用 HTML、CSS 和原版 JavaScript。对我所缺少的任何帮助将不胜感激。这是我当前的代码...

HTML:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#modal1">Contact</a></li>
  </ul>
</nav>

<div>
  <section id="home"></section>
</div>

<div class="contact-modal" id="modal">
  <div class="contact-content">
    <span class="contact-close"><img class="close" img src="images/close.png" alt="Close"></span>
    <h1>Contact Modal</h1>
    <p>(555) 555-5555</p>
  </div>
</div>

CSS:

/* Global Color Palette */
:root {
    --primary-color: orange;
    --secondary-color: black;
    --darkshadow-color: #000000cc;
    --white-color: #fff;
    --background-color: black;
}
  
  
/* Global Typography */
 @import url('https://fonts.googleapis.com/css?family=Poppins');
:root {
    --primary-font: Poppins, serif;
}
html {
    font-size: 100%;
}
@media (max-width: 768px) {
    html { font-size: 70%;}
}
@media (max-width: 500px) {
    html { font-size: 40%;}
}
  
p {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 1.5em;
    color: var(--primary-color);
}
h1 {
    font-family: var(--primary-font);
    font-weight: 500;
    font-size: 4em;
    color: var(--primary-color);
}


/* General Element Styling */
body{
    margin: 0;
    background-color: gray;
} 

section {
    margin: 0;
    padding: 20px;
    height: 100em;
    height: 100vh;
}



/* Navigation Styling */
nav {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 2.5em;
    color: var(--primary-color);
    text-shadow: 2px 2px 2px var(--darkshadow-color);
  }
  nav ul {
    list-style-type: none;
  }
  nav ul li {
    display: inline-block;
    padding: 10px;
  }
nav ul li a {
    display: block;
    text-decoration: none;
    color: var(--primary-color);
}


/*  Style Contact Content */
.contact-modal {  
    background-color: var(--background-color);
    border: 3px solid var(--primary-color);
    border-radius: 10px;
    width: 30%;
    margin: auto;
  opacity: 0;
  visibility: hidden;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}
@-webkit-keyframes rollIn {
    0% { 
       -webkit-transform: translateX(-200%) rotate(-180deg); 
    }
    100% { 
       -webkit-transform: translateX(-50%) rotate(0deg); 
    }
}
@keyframes rollIn {
    0% { 
       transform: translateX(-200%) rotate(-180deg); 
    }
    100% { 
       transform: translateX(-50%) rotate(0deg); 
    }
}
}
.contact-content {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20px;
  text-align: center;
  transform: translateZ(-50%, -50%)
}
.close {
    width: auto;   
    height: 40px; 
    float: right; 
    margin: -80px;
}

.show-contact-modal {
  opacity: 1;
  visibility: visible;
  transform: rotate (-180deg);
}

JavaScript:

let modal = document.querySelector(".contact-modal");
let show = document.querySelector(".show-contact-modal");
let closeButton = document.querySelector(".close-contact");

function toggleModal() {
    modal.classList.toggle("show-contact-modal");
}

function windowOnClick(event) {
    if (event.target === modal) {
        toggleModal();
    }
}

show.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

我的代码现在无法运行，但可以让您了解我的工作原理

Answer 1

我找到了答案。对由 id link 编辑且左负号（离开页面）的模式使用样式。为运行动画创建 2 类一个显示，一个隐藏。让 link 调用显示函数，关闭按钮调用隐藏函数。

这里有一个 link 可以查看实际效果：https://codepen.io/megank-playground/pen/BappdqR

下面是我实现的代码：

HTML:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><span class="link" onclick="showContact()">Contact</span></li>
  </ul>
</nav>

<div>
  <section id="home"></section>
</div>

<div class="contact-modal" id="contactmodal">
  <div class="contact-content">
    <img src="images/close.png" alt="Close" class="close" onclick="hideContact()">
    <h1>Contact Modal</h1>
    <p>(555) 555-5555</p>
  </div>
</div>

CSS:

/* Global Color Palette */
:root {
    --primary-color: orange;
    --secondary-color: black;
    --darkshadow-color: #000000cc;
    --white-color: #fff;
    --background-color: black;
}
  
  
/* Global Typography */
 @import url('https://fonts.googleapis.com/css?family=Poppins');
:root {
    --primary-font: Poppins, serif;
}
html {
    font-size: 100%;
}
@media (max-width: 768px) {
    html { font-size: 70%;}
}
@media (max-width: 500px) {
    html { font-size: 40%;}
}
  
p {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 1.5em;
    color: var(--primary-color);
}
h1 {
    font-family: var(--primary-font);
    font-weight: 500;
    font-size: 4em;
    color: var(--primary-color);
}


/* General Element Styling */
body{
    margin: 0;
    background-color: gray;
} 

section {
    margin: 0;
    padding: 20px;
    height: 100em;
    height: 100vh;
}



/* Navigation Styling */
nav {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 2.5em;
    color: var(--primary-color);
    text-shadow: 2px 2px 2px var(--darkshadow-color);
  }
  nav ul {
    list-style-type: none;
  }
  nav ul li {
    display: inline-block;
    padding: 10px;
  }
nav ul li a, span {
    display: block;
    text-decoration: none;
    color: var(--primary-color);
}
.link {
  cursor: pointer;
}


/*  Style Contact Content */
#contactmodal{
    position: fixed;
    top: 50%;
    left: -50%;
    background-color: var(--background-color);
    padding: 20px;
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    height: auto;
    width: 30%;
}
.contact-content {
  text-align: center;
}
.close {
    width: auto;   
    height: 40px; 
    float: right; 
    margin: -80px;
    cursor: pointer;
}

.hideBox {
    animation: moveLeft 2s ease-in-out forwards;
}
 
.showBox {
   animation: moveright 2s ease-in-out forwards;
}
 
@keyframes moveLeft {
   from {left: 50%; }
   to {left: -50%; }
   0% { transform: translateX(-50%) rotate(0deg); }
   100% { transform: translateX(-100%) rotate(-360deg); }
}
 
@keyframes moveright {
   from {left: -50%; }
   to {left: 50%; }
   0% { transform: translateX(-100%) rotate(-360deg); }
   100% { transform: translateX(-50%) rotate(0deg); }
}

JS:

/*  Contact Box Animation */
function showContact() {
document.getElementById("contactmodal").className = "showBox";
}

function hideContact() {
document.getElementById("contactmodal").className = "hideBox";
}

如何通过从左侧滚入打开模式并通过向左滚出关闭模式？

How to get a modal to open by rolling in from the left and close by rolling out to the left?

javascript

css

animation

modal-dialog

css-transitions