मैं Animista के इस CSS एनिमेशन पर काम कर रहा हूं जो कि केंद्रित नहीं है। प्रवेश एनीमेशन शुरू होता है और केंद्रित नहीं होता है और निकास एनीमेशन बीच में शुरू होता है और नीचे स्लाइड करता है। ऐसा नहीं है कि एनीमेशन को कैसे काम करना चाहिए।

एनीमेशन एक पॉपअप के लिए है जो 1-2 सेकंड के बाद ट्रिगर हो जाता है और जब उपयोगकर्ता क्लोज बटन पर क्लिक करता है तो पॉपअप गायब हो जाना चाहिए।

यहाँ स्निपर है:

const allEl = document.querySelectorAll('body > *:not(#popup):not(script)');
const closeBtn = document.querySelector('#popup-close-btn');
const popup = document.querySelector('#popup');

allEl.forEach(el => {
  el.setAttribute('id', 'blur');
});

const blur = document.querySelector('#blur');

setTimeout(() => {
  blur.classList.add('active');
  popup.style.display = "block";
  popup.classList.add('slide-in-fwd-center');
  popup.classList.remove('slide-out-fwd-center');
}, 2000);

closeBtn.addEventListener('click', () => {
  blur.classList.toggle('active');
  popup.classList.add('slide-out-fwd-center');
  popup.classList.remove('slide-in-fwd-center');
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: relative;
}

#blur.active {
  filter: blur(10px);
  pointer-events: none;
  user-select: none;
}

a {
  position: relative;
  padding: 5px 20px;
  display: inline-block;
  margin-top: 20px;
  text-decoration: none;
  color: #fff;
  background: #111;
}

#popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50%);
  padding: 50px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
  width: 600px;
  background: #fff;
  display: none;
}

.slide-in-fwd-center {
  animation: slide-in-fwd-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-fwd-center {
  0% {
    transform: translateZ(-1400px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}

.slide-out-fwd-center {
  animation: slide-out-fwd-center 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@keyframes slide-out-fwd-center {
  0% {
    -webkit-transform: translateZ(1);
    transform: translateZ(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(600px);
    transform: translateZ(600px);
    opacity: 0;
  }
}
<div class="container">
  <div class="content">
    <h2>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, harum aspernatur. Hic corrupti inventore voluptatum suscipit soluta sapiente odit delectus, beatae dolor, ea minus nesciunt distinctio dolore nihil itaque odio.
    </h2>
  </div>
</div>

<div id="popup">
  <h2>Lorem safasfasflijlkasfj oafljka aufhskafkl asoifj </h2>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit dolore, recusandae enim quisquam nisi, architecto hic sed fugit modi quibusdam odit quia illum ipsa doloremque at reiciendis vitae nam inventore.</p>
  <a href="#" id="popup-close-btn">Close</a>
</div>

मुझसे यहां क्या गलत हो रहा है?

1
s.khan 3 सितंबर 2021, 21:26

2 जवाब

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

प्रस्तुत उत्तरों में जोड़ने का एक और तरीका यहां दिया गया है:

#popup तत्व position:absolute है, इसलिए इसे केंद्रित रखने के लिए आप CSS में calc() का लाभ उठा सकते हैं, क्योंकि यह फ़ंक्शन इकाइयों के मिश्रण की अनुमति देता है (जैसे calc(50% - 300px)), जो आपके पॉपअप की चौड़ाई (600px) का 300px आधा है:

left: calc(50% - 300px);

हालांकि, तब मैंने देखा कि किसी कारण से translateZ() उम्मीद के मुताबिक काम नहीं करेगा।

अब 2 विकल्प निम्नलिखित हैं:

  1. स्लाइड-इन / स्लाइड-आउट
  2. ज़ूम इन ज़ूम आउट

स्लाइड-इन / स्लाइड-आउट

translateZ() को translate(x, y) से बदलने के लिए 2डी स्लाइड इन/स्लाइड आउट (ज़ूम प्रभाव के बिना) के बाद:

const allEl = document.querySelectorAll('body > *:not(#popup):not(script)');
const closeBtn = document.querySelector('#popup-close-btn');
const popup = document.querySelector('#popup');

allEl.forEach(el => {
  el.setAttribute('id', 'blur');
});

const blur = document.querySelector('#blur');

setTimeout(() => {
  blur.classList.add('active');
  popup.style.display = "block";
  popup.classList.add('slide-in-fwd-center');
  popup.classList.remove('slide-out-fwd-center');
}, 2000);

closeBtn.addEventListener('click', () => {
  blur.classList.toggle('active');
  popup.classList.add('slide-out-fwd-center');
  popup.classList.remove('slide-in-fwd-center');
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: relative;
}

#blur.active {
  filter: blur(10px);
  pointer-events: none;
  user-select: none;
}

a {
  position: relative;
  padding: 5px 20px;
  display: inline-block;
  margin-top: 20px;
  text-decoration: none;
  color: #fff;
  background: #111;
}

#popup {
  position: absolute;
  top: 50%;
  left: calc(50% - 300px);
  padding: 50px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
  width: 600px;
  background: #fff;
  display: none;
}

.slide-in-fwd-center {
  animation: slide-in-fwd-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-fwd-center {
  0% {
    transform: translate(-1400px, -1400px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.slide-out-fwd-center {
  animation: slide-out-fwd-center 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@keyframes slide-out-fwd-center {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(1400px, 1400px);
    transform: translate(1400px, 1400px);
    opacity: 0;
  }
}
<div class="container">
  <div class="content">
    <h2>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, harum aspernatur. Hic corrupti inventore voluptatum suscipit soluta sapiente odit delectus, beatae dolor, ea minus nesciunt distinctio dolore nihil itaque odio.
    </h2>
  </div>
</div>

<div id="popup">
  <h2>Lorem safasfasflijlkasfj oafljka aufhskafkl asoifj </h2>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit dolore, recusandae enim quisquam nisi, architecto hic sed fugit modi quibusdam odit quia illum ipsa doloremque at reiciendis vitae nam inventore.</p>
  <a href="#" id="popup-close-btn">Close</a>
</div>

ज़ूम इन ज़ूम आउट

और यहाँ scale(x) के साथ ज़ूम इन / ज़ूम आउट के साथ एनिमेशन:

const allEl = document.querySelectorAll('body > *:not(#popup):not(script)');
const closeBtn = document.querySelector('#popup-close-btn');
const popup = document.querySelector('#popup');

allEl.forEach(el => {
  el.setAttribute('id', 'blur');
});

const blur = document.querySelector('#blur');

setTimeout(() => {
  blur.classList.add('active');
  popup.style.display = "block";
  popup.classList.add('slide-in-fwd-center');
  popup.classList.remove('slide-out-fwd-center');
}, 2000);

closeBtn.addEventListener('click', () => {
  blur.classList.toggle('active');
  popup.classList.add('slide-out-fwd-center');
  popup.classList.remove('slide-in-fwd-center');
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: relative;
}

#blur.active {
  filter: blur(10px);
  pointer-events: none;
  user-select: none;
}

a {
  position: relative;
  padding: 5px 20px;
  display: inline-block;
  margin-top: 20px;
  text-decoration: none;
  color: #fff;
  background: #111;
}

#popup {
  position: absolute;
  top: 50%;
  left: calc(50% - 300px);
  padding: 50px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
  width: 600px;
  background: #fff;
  display: none;
}

.slide-in-fwd-center {
  animation: slide-in-fwd-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: scale(5);
    transform: scale(5);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

.slide-out-fwd-center {
  animation: slide-out-fwd-center 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@keyframes slide-out-fwd-center {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(5);
    transform: scale(5);
    opacity: 0;
  }
}
<div class="container">
  <div class="content">
    <h2>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, harum aspernatur. Hic corrupti inventore voluptatum suscipit soluta sapiente odit delectus, beatae dolor, ea minus nesciunt distinctio dolore nihil itaque odio.
    </h2>
  </div>
</div>

<div id="popup">
  <h2>Lorem safasfasflijlkasfj oafljka aufhskafkl asoifj </h2>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit dolore, recusandae enim quisquam nisi, architecto hic sed fugit modi quibusdam odit quia illum ipsa doloremque at reiciendis vitae nam inventore.</p>
  <a href="#" id="popup-close-btn">Close</a>
</div>
1
Jürgen Fink 3 सितंबर 2021, 20:37

पहली समस्या यह है कि आपका शरीर कम लोड हो रहा है। min-height: 100vh; इसे हल करता है।

दूसरा मुद्दा यह है कि आपके एनीमेशन वर्ग जोड़े जा रहे हैं जो आपकी डिफ़ॉल्ट ट्रांसफॉर्म संपत्ति को ओवरराइट कर रहे हैं। एनीमेशन कक्षाओं में बस एक्स और वाई जोड़ना है।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            position: relative;
            min-height: 100vh;
        }

        #blur.active {
            filter: blur(10px);
            pointer-events: none;
            user-select: none;
        }

        a {
            position: relative;
            padding: 5px 20px;
            display: inline-block;
            margin-top: 20px;
            text-decoration: none;
            color: #fff;
            background: #111;
        }

        #popup {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            padding: 50px;
            box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
            width: 600px;
            background: #fff;
            display: none;
        }

        .slide-in-fwd-center {
            animation: slide-in-fwd-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }

        @keyframes slide-in-fwd-center {
            0% {
                transform: translateZ(-1400) translateX(-50%) translateY(-50%);
                opacity: 0;
            }
            100% {
                transform: translateZ(0) translateX(-50%) translateY(-50%);
                opacity: 1;
            }
        }

        .slide-out-fwd-center {
            animation: slide-out-fwd-center 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
        }

        @keyframes slide-out-fwd-center {
            0% {
                -webkit-transform: translateZ(1) translateX(-50%) translateY(-50%);
                transform: translateZ(1) translateX(-50%) translateY(-50%);
                opacity: 1;
            }
            100% {
                -webkit-transform: translateZ(600) translateX(-50%) translateY(-50%);
                transform: translateZ(600) translateX(-50%) translateY(-50%);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="content">
        <h2>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, harum aspernatur. Hic corrupti inventore voluptatum suscipit soluta sapiente odit delectus, beatae dolor, ea minus nesciunt distinctio dolore nihil itaque odio.
        </h2>
    </div>
</div>

<div id="popup">
    <h2>Lorem safasfasflijlkasfj oafljka aufhskafkl asoifj </h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit dolore, recusandae enim quisquam nisi, architecto hic sed fugit modi quibusdam odit quia illum ipsa doloremque at reiciendis vitae nam inventore.</p>
    <a href="#" id="popup-close-btn">Close</a>
</div>
<script
        src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous"></script>
<script type="application/javascript">
    const allEl = document.querySelectorAll('body > *:not(#popup):not(script)');
    const closeBtn = document.querySelector('#popup-close-btn');
    const popup = document.querySelector('#popup');

    allEl.forEach(el => {
        el.setAttribute('id', 'blur');
    });

    const blur = document.querySelector('#blur');

    setTimeout(() => {
        blur.classList.add('active');
        popup.style.display = "block";
        popup.classList.add('slide-in-fwd-center');
        popup.classList.remove('slide-out-fwd-center');
    }, 2000);

    closeBtn.addEventListener('click', () => {
        blur.classList.toggle('active');
        popup.classList.add('slide-out-fwd-center');
        popup.classList.remove('slide-in-fwd-center');
    });

</script>

</body>
</html>
2
Clayton Engle 3 सितंबर 2021, 19:11