影片輸入后的CSS影片輸出

我在 HTML 元素的屬性中設定了影片it is displayed，當單擊按鈕時，我希望反向播放相同的影片it should hide with same animation。我怎樣才能做到這一點。

正在運行的“影片”：

.modal{
animation: myAnim 1s ease 0s 1 normal forwards;
}
@keyframes  myAnim {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }

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

}

HTML：

<div id="myModal"  class="modal fixed hidden z-1 w-full h-full bg-red-100 h-screen ">

<button  id="myBtn" class=" p-2 bg-yellow-400 rounded m-4 absolute right-0  text-xs font-bold ">
HIDE/SHOW..
 </button>

我正在使用 JS 顯示/隱藏模態。我如何隱藏具有相同影片的模態。

uj5u.com熱心網友回復：

創建兩個類，一個用于使模態出現，另一個用于使其消失，

出現類

.modal-appr{
animation: appr 1s ease 0s 1 normal forwards;
}
@keyframes  appr {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }

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

}

使模態消失的類

.modal-disappr{
animation: disappr 1s ease 0s 1 normal forwards;
}
@keyframes  disappr {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-50px);
  }

}

現在只需使用 Javascriptclasslist在按鈕切換時將此類添加到模態

const btn = document.querySelector('mybtn');
const modal = document.querySelector('#myModal');

btn.addEventListener ('click', function toggleClass () {
    if(modal.classList.contains('appr')) {
        modal.classList.add('disappr');
        modal.classList.remove('appr');
    } else {
        modal.classList.add('appr');
        modal.classList.remove('disappr');
    }
})

uj5u.com熱心網友回復：

您可以通過使用切換類和過渡來實作這一點。

let btn = document.getElementById('model_btn');
let model = document.getElementById('model');
btn.addEventListener('click', function(){
  model.classList.toggle('show');
})

/* Styling the markup */
#model{
  width: 200px;
  height: 100px;
  background-color: yellow;
  padding: 20px;
  margin-bottom: 20px;
}
#model_btn{
  border: none;
  background-color: green;
  padding: 10px;
  color: white;
  cursor: pointer;
}

/* Showing and hiding animation with transition */

#model{
  position: relative;
  visibility: none;
  opacity: 0;
  top: 0;
  left: 0;
  transform: translateX(-50px);
  transition: all 1s ease;
}
#model.show{
  visibility: visible;
  opacity: 1;
  transform: translateX(0px);
}

<div id="model">
  Content
</div>
<button id="model_btn">Show/Hide Model</button>

影片/關鍵幀方法。

let btn = document.getElementById('model_btn');
let model = document.getElementById('model');
btn.addEventListener('click', function(){
  model.classList.toggle('show');
})

/* Styling the markup */
#model{
  width: 200px;
  height: 100px;
  background-color: yellow;
  padding: 20px;
  margin-bottom: 20px;
  visibility: none;
  opacity: 0;
  transform: translateX(-50px);
}
#model_btn{
  border: none;
  background-color: green;
  padding: 10px;
  color: white;
  cursor: pointer;
}

.show{
  animation: myAnim 1s ease 0s 1 normal forwards;
}
@keyframes  myAnim {
  0% {
    visibility: none;
    opacity: 0;
    transform: translateX(-50px);
  }

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

<div id="model">
  Content
</div>
<button id="model_btn">Show/Hide Model</button>

標籤：html css

上一篇：如何使用“.cdk-overlay-pane”為角材料墊選擇自定義或應用另一個類

下一篇：有沒有辦法以css樣式定義輸入？