मेरे पास एक vue.js एप्लिकेशन है जिसमें मैं यह पता लगाने की कोशिश कर रहा हूं कि विलंबित सीएसएस संक्रमण को कैसे उलटना है। मेरे पास एक div है जिसका चौड़ाई अनुबंध जब उपयोगकर्ता बंद बटन पर क्लिक करता है। फिर ऊंचाई सिकुड़ती है। ऊंचाई में देरी है क्योंकि मैं ऊंचाई को अनुबंधित करने से पहले चौड़ाई के अनुबंध की प्रतीक्षा करना चाहता हूं।

इससे पहले:

enter image description here

उपरांत:

enter image description here

जब उपयोगकर्ता प्रश्न चिह्न आइकन पर क्लिक करता है, तो मैं चाहता हूं कि विपरीत हो। ऊंचाई तुरंत फैलनी चाहिए और फिर देरी के बाद चौड़ाई फैलनी चाहिए।

ऐसा करने के सभी उदाहरण जो मुझे Google पर मिलते हैं, होवर ट्रांज़िशन से निपटते हैं। वे कहते हैं कि रिवर्स ट्रांज़िशन को होवर क्लास में डालें। सभी डेमो मैंने काम करते हुए देखे हैं। लेकिन होवर के अलावा किसी अन्य चीज़ से ट्रिगर होने वाले बदलावों की बात आने पर यह कैसे काम करता है, इसके बारे में कुछ अलग होना चाहिए। मेरे मामले में, ट्रिगर एक माउस क्लिक है। और ऑनलाइन समाधान काम नहीं करते। इसके बजाय क्या होता है कि ट्रांज़िशन-टू क्लास में रखा गया रिवर्स ट्रांज़िशन मूल ट्रांज़िशन को ओवरराइड करता है - जिसका अर्थ है कि मूल ट्रांज़िशन पहले ऊंचाई को अनुबंधित करता है (जो सामग्री फिट नहीं होने पर भयानक लग रहा है) फिर चौड़ाई।

यहाँ मेरा कोड है:

.need-help-container {
    position: absolute;
    right: 0;
    height: 120px;
    ...
    transition: right .5s, height .5s .5s;
}

.need-help-container-closed {
    right: -360px;
    height: 50px;

    transition: right .5s .5s, height .5s; // <-- doesn't work
}
<!-- need help box -->
<div class="need-help-container" :class="{'need-help-container-closed': needHelpClosed}">
...
    <!-- close button -->
    <div ...>
        <v-icon @click="needHelpClosed = true" ...>close</v-icon>
    </div>
</div>

क्या होवर से जुड़े उदाहरणों का एक ही समाधान यहां काम करना चाहिए? यदि हां, तो यह मेरे लिए काम क्यों नहीं करेगा? यदि नहीं, तो मेरे मामले का वैकल्पिक समाधान क्या होगा?

धन्यवाद।

0
gib65 1 जून 2020, 18:43
आपके बंद कंटेनर का वर्ग नाम क्या है?
 – 
Rishab Tyagi
1 जून 2020, 19:36
ज़रूरत-मदद-कंटेनर-बंद
 – 
gib65
1 जून 2020, 21:58

2 जवाब

ये कोशिश करें:

.need-help-container-closed:active{
//your code here
}

उपयोग करें: होवर के स्थान पर सक्रिय। क्या यह काम करता है?

0
Rishab Tyagi 2 जून 2020, 07:25
सुनिश्चित नहीं है कि कैसे कार्यान्वित करें: सक्रिय। मैंने उपरोक्त कोड में ज़रूरत-सहायता-कंटेनर-बंद के सभी उदाहरणों को ज़रूरत-सहायता-कंटेनर के साथ बदल दिया: सक्रिय लेकिन उसने कंटेनर को गिरने से रोक दिया। क्या :सक्रिय केवल हाइपरलिंक पर लागू होता है?
 – 
gib65
1 जून 2020, 22:05
हाँ, :active आइटम को क्लिक करने योग्य बनाता है। आपने कहा है कि ट्यूटोरियल में, उन्होंने :hover के लिए कोड प्रदान किया है। आपको उस कोड को : active में रखना होगा। मैंने अपना उत्तर अपडेट कर दिया है।
 – 
Rishab Tyagi
2 जून 2020, 07:27
मुझे डर है कि यह काम नहीं करता।
 – 
gib65
2 जून 2020, 16:08
मुझे इस चैटबॉक्स के आपके एचटीएमएल सीएसएस और जेएस की जरूरत है। मैं इसे आपके लिए ठीक करने की कोशिश करूंगा।
 – 
Rishab Tyagi
2 जून 2020, 16:39

मैंने एक उपाय निकाला। मैंने देरी के क्रम को उलटने के लिए एक अलग वर्ग बनाया:

.need-help-container-opening {
  trnasition: right .5s .5s, height .5s;
}

फिर मैंने एक नए चर के आधार पर कक्षा को जोड़ा:

<div class="need-help-container"
  :class="{'need-help-container-closed': needHelpClosed, 'need-help-container-opening': needHelpOpening}"
  @transitionend="needHelpOpening = false">
    <div class="faq-icon-container need-help-item"
      :class="{'faq-icon-container-closed': needHelpClosed}"
      @click="needHelpOpening = true; needHelpClosed = false">
        // Question Mark icon... click to open
    </div>
...
</div>

तो मेरे पास एक वेरिएबल है जिसे ज़रूरत हैल्प ओपनिंग कहा जाता है जिसे मैं सत्य पर सेट करता हूं जब उपयोगकर्ता बॉक्स खोलने के लिए प्रश्न चिह्न पर क्लिक करता है। जब यह चर सत्य होता है, तो बॉक्स को ज़रूरत-सहायता-कंटेनर-खोलने वाला वर्ग मिलता है जो देरी को उलट देता है। अंत में, जब संक्रमण समाप्त हो जाता है, तो संक्रमण अंत घटना आग लगती है और मैं इसे बॉक्स के लिए मुख्य div में पकड़ता हूं और ज़रूरत को सेट करता हूं ताकि मूल विलंब क्रम रीसेट हो जाए।

0
gib65 2 जून 2020, 17:15