मोडल व्यू ऐनिमेट करना

मॉडल व्यू, ज़रूरी मैसेज दिखाने के लिए यूज़र इंटरफ़ेस को ब्लॉक कर देते हैं. अपने ऐप्लिकेशन में मॉडल व्यू को ऐनिमेट करने का तरीका जानें.

पॉल लुइस

मॉडल व्यू ऐनिमेट किया जा रहा है.
इसे आज़माएं

मॉडल व्यू ज़रूरी मैसेज के लिए होते हैं. इसके लिए, आपके पास यूज़र इंटरफ़ेस को ब्लॉक करने की काफ़ी वजहें होती हैं. इनका इस्तेमाल सावधानी से करें, क्योंकि इनसे रुकावट पैदा होती है. साथ ही, इनका इस्तेमाल करने पर, उपयोगकर्ता का अनुभव खराब हो सकता है. हालांकि, कुछ मामलों में व्यू सही होते हैं और इनमें ऐनिमेशन जोड़कर उन्हें हक़ीक़त में बदला जा सकता है.

  • मोडल व्यू का कम से कम इस्तेमाल करें. इस वजह से, अगर उपयोगकर्ताओं का अनुभव खराब होता है, तो वे परेशान हो जाते हैं.
  • ऐनिमेशन में स्केल जोड़ने से एक अच्छा "ड्रॉप-ऑन" इफ़ेक्ट मिलता है.
  • जब उपयोगकर्ता इसे खारिज करे, तो मॉडल व्यू से तुरंत छुटकारा पाएं. हालांकि, मोडल व्यू को स्क्रीन पर थोड़ा धीरे-धीरे लाएं, ताकि उपयोगकर्ता चौंक न जाए.

मॉडल ओवरले को व्यूपोर्ट के साथ अलाइन किया जाना चाहिए, इसलिए इसके position को fixed पर सेट करें:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  opacity: 0;

  will-change: transform, opacity;
}

इसका शुरुआती opacity 0 है, इसलिए इसे व्यू से छिपाया गया है. हालांकि, इसके बाद इसे pointer-events को none पर सेट करना होगा, ताकि क्लिक और टच पास हो सकें. ऐसा न करने पर, सभी इंटरैक्शन ब्लॉक हो जाते हैं और पूरा पेज काम नहीं करता. आखिर में, क्योंकि यह अपने opacity और transform को ऐनिमेट करता है, इसलिए उन्हें will-change के साथ 'बदलाव हो रहा है' के तौर पर मार्क करना ज़रूरी है (विल-बदलाव प्रॉपर्टी का इस्तेमाल करना भी देखें).

जब व्यू दिख रहा हो, तो उसे इंटरैक्शन स्वीकार करने होंगे और उसका opacity होना चाहिए:

.modal.visible {
  pointer-events: auto;
  opacity: 1;
}

अब जब भी मॉडल व्यू की ज़रूरत हो, तो "दिखने वाली" क्लास को टॉगल करने के लिए JavaScript का इस्तेमाल किया जा सकता है:

modal.classList.add('visible');

ऐसा होने पर, मोडल व्यू बिना किसी ऐनिमेशन के दिखता है. इसलिए, अब इसे इसमें जोड़ा जा सकता है (कस्टम ईज़िंग भी देखें):

.modal {
  transform: scale(1.15);

  transition:
    transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

ट्रांसफ़ॉर्म में scale जोड़ने से व्यू, स्क्रीन पर थोड़ा नीचे आता है. यह अच्छा इफ़ेक्ट है. डिफ़ॉल्ट ट्रांज़िशन, कस्टम कर्व और 0.1 सेकंड की अवधि के साथ, ट्रांसफ़ॉर्म और ओपैसिटी प्रॉपर्टी, दोनों पर लागू होता है.

हालांकि, इसकी अवधि बहुत कम है, लेकिन यह उस समय के लिए सही है जब उपयोगकर्ता व्यू को खारिज करके आपके ऐप्लिकेशन पर वापस जाना चाहता है. बुरा यह है कि मॉडल व्यू दिखने पर यह तरीका ज़्यादा एग्रेसिव हो सकता है. इसे ठीक करने के लिए, visible क्लास के लिए ट्रांज़िशन वैल्यू बदलें:

.modal.visible {
  transform: scale(1);

  transition:
    transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

अब मॉडल व्यू को स्क्रीन पर दिखने में 0.3 सेकंड लगते हैं, जो थोड़ा कम दिखता है, लेकिन इसे तुरंत खारिज कर दिया जाता है. उपयोगकर्ता इसे पसंद करेगा.