मैं वर्तमान में एक स्विच लागू कर रहा हूं। समस्या यह है कि पृष्ठभूमि जिसे स्विच द्वारा छिपाया जाना चाहिए वह बाईं ओर एक पतली रेखा दिखाती है। मुझे बिल्कुल पता नहीं क्यों। अजीब बात यह है कि यहाँ SO पर सब कुछ वास्तव में अच्छा लगता है। स्विच अन्य सभी सामग्री के साथ स्क्रॉल करने योग्य मुख्य आवरण में स्थित है। मैंने सोचा कि यह समस्या हो सकती है लेकिन स्क्रॉलिंग को हटाने के बाद भी त्रुटि थी:

enter image description here

जब मैं इंस्पेक्टर चलाता हूं और तत्व को घुमाता हूं, तो पृष्ठभूमि बाहर निकलती प्रतीत होती है:

enter image description here

यह मेरा कोड है। मैंने कम कोशिश की है लेकिन समस्या नहीं मिल रही है:

let toggle = document.getElementById('container');
let toggleContainer = jQuery('#toggle-container');
let toggleNumber;

jQuery('#container').click( function() {
  toggleNumber = !toggleNumber;
  if (toggleNumber) {
    toggleContainer.css( "clip-path", "inset(0 0 0 50%)" );
  } else {
    toggleContainer.css( "clip-path", "inset(0 50% 0 0)" );
  }
});
#container {
  width: 100%;
  height: 56px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
  border-radius: 3px;
  -webkit-box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, .2);
  box-shadow: 0 0.12rem 0.4rem 0 rgba(0, 0, 0, .2);
}

.inner-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
}

.inner-container:first-child {
  background: gray;
  color: #ffffff;
}

.inner-container:nth-child(2) {
  background: chartreuse;
  color: #ffffff;
  clip-path: inset(0 50% 0 0);
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.toggle {
  width: 50%;
  position: absolute;
  height: inherit;
  display: flex;
  font-weight: 600;
}

.toggle p {
  margin: auto;
}

.toggle:nth-child(1) {
  right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
    <div class="inner-container">
      <div class="toggle">
        <p>Private</p>
      </div>
      <div class="toggle">
        <p>Public</p>
      </div>
    </div>
    <div class="inner-container" id='toggle-container'>
      <div class="toggle">
        <p>Private</p>
      </div>
      <div class="toggle">
        <p>Public</p>
      </div>
    </div>
  </div>
0
Mr. Jo 24 सितंबर 2019, 10:13

2 जवाब

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

मैं कम कोड के साथ और clip-path के उपयोग के बिना एक अनुकूलित संस्करण का सुझाव दूंगा:

let toggle = document.getElementById('container');
let toggleContainer = jQuery('.inner-container');

jQuery('#container').click(function() {
  toggleContainer.toggleClass('second');
  });
#container {
  margin-bottom: 20px;
  user-select: none;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 0 0.12rem 0.4rem 0 rgba(0, 0, 0, .2);
}

.inner-container {
  height: 56px;
  text-transform: uppercase;
  display: flex;
  background: 
    linear-gradient(chartreuse,chartreuse) left/50% 100% no-repeat,
    gray;
  color: #ffffff;
  transition: 0.2s;
}
.inner-container.second {
  background-position:right;
}

.toggle {
  width: 50%;
  display: flex;
  font-weight: 600;
}

.toggle p {
  margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="inner-container">
    <div class="toggle">
      <p>Private</p>
    </div>
    <div class="toggle">
      <p>Public</p>
    </div>
  </div>
</div>
1
Temani Afif 24 सितंबर 2019, 07:40

ऐसा लगता है कि आप क्या देख रहे हैं: जो CSS बनाकर किया गया था: clip-path: inset(0 50% 0 1px);

शायद बाईं ओर कुछ नकारात्मक स्थान जोड़ने का प्रयास करें:

toggleContainer.css( "clip-path", "inset(0 50% 0 -10px)" );

enter image description here

0
Thomas Byy 24 सितंबर 2019, 07:26