जब blueBoxId div क्लिक किया जाता है तो मैं div redBoxId को निकालने का प्रयास कर रहा हूं। सीएसएस पक्ष पर, मेरे पास एक संपत्ति के रूप में inline-block है क्योंकि यह स्वचालित रूप से स्वयं को मूल div पर केंद्रित करता है। हालांकि, मैं एक प्रभाव (संक्रमण ??) जोड़ना चाहता हूं, जहां जब redBoxId को हटा दिया जाता है, तो blueBoxId धीरे/सुचारु रूप से तेज गति के बजाय चलता है (इनलाइन रखते हुए- एक सीएसएस संपत्ति के रूप में ब्लॉक)।

document.getElementById('blueBoxId').addEventListener('click', function() {
  document.getElementById('blueBoxId').style.transition = "all 2s ease-in-out";
  document.getElementById('redBoxId').remove();
})
#redBoxId {
  background-color: red;
  width: 100px;
  height: 100px;
  display: inline-block;
}

#blueBoxId {
  background-color: blue;
  width: 100px;
  height: 100px;
  display: inline-block;
}
<div class="redBlueBox">
  <div id="redBoxId">hi</div>
  <div id="blueBoxId">hi</div>
</div>
1
Deke 2 अप्रैल 2018, 21:03

2 जवाब

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

transition को css में जोड़ें और आप remove पर संक्रमण लागू नहीं कर सकते, चौड़ाई और / या अस्पष्टता को कम कर सकते हैं, फिर एनीमेशन समाप्त होने के बाद तत्व को हटा दें,

document.getElementById('blueBoxId').addEventListener('click', function(){
    
    document.getElementById('redBoxId').style.width = 0;
    document.getElementById('redBoxId').style.opacity = 0;
    
    /*
    * optional if you want remove the DOM and not just hide it
    *
     setTimeout(function(){
       document.getElementById('redBoxId').remove();
     }, 1000);
    */
})
#redBoxId{
  background-color: red;
  width: 100px;
  height: 100px;
  display: inline-block;
  transition: all 1s linear;
}

#blueBoxId{
  background-color: blue;
  width: 100px;
  height: 100px;
  display: inline-block;
}
<div class="redBlueBox">
   <div id="redBoxId">hi</div>
   <div id="blueBoxId">hi</div>
</div>
1
Taki 2 अप्रैल 2018, 18:18

मैंने पहले लाल बॉक्स को हटाने के लिए दृश्यता का उपयोग किया, फिर इसकी चौड़ाई 0 पर सेट की। अब, ब्लूबॉक्स एनिमेट नहीं कर रहा है, एनीमेशन/संक्रमण लाल बॉक्स पर है क्योंकि इसकी चौड़ाई कम हो जाती है, लेकिन क्योंकि दृश्यता छिपी हुई है इसलिए आप ऐसा नहीं करते हैं। टी इसे देखें।

मैंने संक्रमण समय को 0.5s पर सेट किया है, इसे आप जो चाहें संपादित कर सकते हैं। दूसरा उत्तर भी काम करता है, मैं आपको संक्रमण के लिए एक और विकल्प दे रहा हूं।

यह विधि जेएस में सीएसएस करने के बजाय एक सीएसएस वर्ग का उपयोग करती है।

आप एक ही चीज़ को प्राप्त करने के लिए अन्य उत्तर के सीएसएस के साथ वर्ग जोड़ को भी जोड़ सकते हैं

document.getElementById('blueBoxId').addEventListener('click', function() {
  document.getElementById('redBoxId').classList.add("remove");
});
#redBoxId {
  background-color: red;
  width: 100px;
  height: 100px;
  display: inline-block;
  transition: width 0.5s;
  overflow: hidden;
  vertical-align: top;
}

#blueBoxId {
  background-color: blue;
  width: 100px;
  height: 100px;
  display: inline-block;
  vertical-align: top;
}

#redBoxId.remove {
  visibility: hidden;
  width: 0;
}
<div class="redBlueBox">
  <div id="redBoxId">hi</div>
  <div id="blueBoxId">hi</div>
</div>
1
Huangism 2 अप्रैल 2018, 18:33