मैंने एचटीएमएल तत्व पर संपत्ति में एनीमेशन सेट किया है जब 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);
  }

}

एचटीएमएल:

<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>

मैं जेएस का उपयोग कर मोडल दिखा रहा/छुपा रहा हूं। मैं एक ही एनीमेशन के साथ मोडल कैसे छिपा सकता हूं।

2
Fayakon 21 नवम्बर 2021, 08:51

2 जवाब

सबसे बढ़िया उत्तर

दो वर्ग बनाएं, एक मोडल को प्रदर्शित करने के लिए और दूसरा इसे गायब करने के लिए,

प्रदर्शित होने के लिए कक्षा

.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);
  }

}

अब बस इस वर्ग को मोडल के classlist में जोड़ने के लिए जावास्क्रिप्ट का उपयोग करें जब बटन टॉगल करता है

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');
    }
})
3
RudyTheWebDev 21 नवम्बर 2021, 09:26

आप इसके बजाय टॉगल क्लास और ट्रांज़िशन का उपयोग करके इसे प्राप्त कर सकते हैं।

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>
2
Feroz 21 नवम्बर 2021, 09:33
मैं इसे बाईं ओर से दिखाना और छिपाना चाहता हूं, क्या हम इसे कीफ्रेम का उपयोग करके प्राप्त कर सकते हैं?
 – 
Fayakon
21 नवम्बर 2021, 09:24
हाँ आप कर सकते हैं। मैं जवाब संपादित कर रहा हूँ। एक मिनट।
 – 
Feroz
21 नवम्बर 2021, 09:26
कृपया ऊपर की जाँच करें, मैंने आपकी आवश्यकता के अनुसार नया की-फ्रेम दृष्टिकोण जोड़ा है और संक्रमण दृष्टिकोण को संपादित किया है। लेकिन मुझे लगता है कि इसके लिए ट्रांजिशन अप्रोच बेहतर है।
 – 
Feroz
21 नवम्बर 2021, 09:34