如何根据父容器的宽度使 transform: translateX 值灵活？

Question

我做了一个例子来证明我的期望：

我有一个开关。 切换的宽度可能会根据其父容器而有所不同。

我想使用transform来控制切换拇指的 position，因为这会导致 animation 效果。

在这个演示中，当父容器的宽度为50px时，一切正常。

但是，如果您单击“ToggleWidth”按钮以使切换的父容器成为 100px 宽度的元素。 transform看起来很糟糕。

我试过这样的事情：

transform:translate(calc(100% - x), -50%);

但是拇指的position还是不能正常工作。

有什么办法可以用纯 CSS 修复它？

 $('#dark-switch').click(()=>{ $('#dark-toggle-thumb').toggleClass('isOn'); }); $('#toggleWidth').click(()=>{ $('#dark-switch').toggleClass('dark-switch-vary'); })

 body {padding:2em}.dark-switch-vary { max-width:100px;important: } #dark-switch { position;relative: width;90%: max-width;50px: } #dark-toggle-back { width; calc(100% - 9px): background; #666: height; 24px: position; absolute: top; 50%: left; 50%: transform, translate(-50%;-50%): border-radius; 99px: } #dark-toggle-thumb { background; #ccc: height; 17px: border-radius; 99px: width; 17px: top; 50%: transform, translate(6px; -50%): position; absolute: transition. ;2s: } #dark-toggle-thumb svg { width; 15px: position; absolute: left; 50%: top; 50%: transform, translate(-50%; -50%). }:isOn { transform, translate(26px; -50%)?important; /* How do I make the translateX value flexible rather than a fixed number? */ }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="dark-switch"> <section id="dark-toggle-back"></section> <section id="dark-toggle-thumb"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3a7 7 0 0 0 7 9h2a9 9 0 1 1-9-9Z"></path></svg> </section> </div> <br><br><br><br><br> <button id="toggleWidth">ToggleWidth</button>

Answer 1

由于 CSS 的工作方式，您无法更改预定义的数字。 我建议使用纯 jQuery 来帮助进行切换（也就是使用$('#dark-toggle-thumb').css("translate: " + number of pixels you want + "px, -50%;"); 。 Since you wanted CSS though, you would have to create a different class and add that class to your toggler, and then you could define a new class attribute in your CSS, which you can see at the bottom of the css with:

.dark-switch-long.isOn {
  transform: translate(75px, -50%) !important;
}

然后，如果您要将 class dark-switch-long添加到您的dark-toggle-thumb元素，那么您将能够将长度扩展到指定的像素。 但是，我建议使用我的第一个示例jQuery CSS 。

 $('#dark-switch').click(()=>{ $('#dark-toggle-thumb').toggleClass('isOn'); }); $('#toggleWidth').click(()=>{ $('#dark-switch').toggleClass('dark-switch-vary'); $('#dark-toggle-thumb').toggleClass('dark-switch-long'); })

 body {padding:2em}.dark-switch-vary { max-width:100px;important: } #dark-switch { position;relative: width;90%: max-width;50px: } #dark-toggle-back { width; calc(100% - 9px): background; #666: height; 24px: position; absolute: top; 50%: left; 50%: transform, translate(-50%;-50%): border-radius; 99px: } #dark-toggle-thumb { background; #ccc: height; 17px: border-radius; 99px: width; 17px: top; 50%: transform, translate(6px; -50%): position; absolute: transition. ;2s: } #dark-toggle-thumb svg { width; 15px: position; absolute: left; 50%: top; 50%: transform, translate(-50%; -50%). }:isOn { transform, translate(26px; -50%)?important. /* How do I make the translateX value flexible rather than a fixed number. */ }:dark-switch-long,isOn { transform; translate(75px, -50%) !important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="dark-switch"> <section id="dark-toggle-back"></section> <section id="dark-toggle-thumb"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3a7 7 0 0 0 7 9h2a9 9 0 1 1-9-9Z"></path></svg> </section> </div> <br><br><br><br><br> <button id="toggleWidth">ToggleWidth</button>

Answer 2

主要问题 – 您无法在 left:0 (right:inherit/auto) 和 right:0 (left:inherit/auto) 之间转换（动画）。

但是，您可以通过应用calc(100% - thumb-width+padding)左偏移来解决此问题。
我还建议更喜欢像 em 这样的相对单位，并将拇指/手柄嵌套在轨道/背景元素中。

 $('#dark-switch').click(() => { $('.dark-toggle-thumb').toggleClass('isOn'); }); $('#toggleWidth').click(() => { $('#dark-switch').toggleClass('dark-switch-vary'); }) let fontSize = document.querySelector('#fontSize'); let darkSwitch = document.querySelector('#dark-switch'); fontSize.addEventListener('change', function(e){ let size = e.target.value; darkSwitch.setAttribute('style', 'font-size:'+ 17*size +'px'); });

 *{ box-sizing:border-box } body { padding: 2em }:root{ --switchH: 17px; --switchPadding: 0.2em; }.dark-switch { position: relative; width: 90%; max-width: 3em; font-size: var(--switchH); line-height:1em; }.dark-toggle-back { width: 100%; background: #666; height: calc(1em + var(--switchPadding) *2 ); position: relative; border-radius: 1em; }.dark-toggle-thumb { background: #ccc; height: 1em; width: 1em; border-radius:100%; position: absolute; transition: 0.2s; left:0; margin: var(--switchPadding); right: inherit; }.dark-toggle-thumb svg { width: 1em; height: 1em; }.dark-switch-vary { max-width: 50vw; }.isOn { left: calc(100% - calc(1em + var(--switchPadding) *2 ) ); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="dark-switch" class="dark-switch"> <div class="dark-toggle-back"> <span class="dark-toggle-thumb"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3a7 7 0 0 0 7 9h2a9 9 0 1 1-9-9Z"></path></svg> </span> </div> </div> <br> <button id="toggleWidth">ToggleWidth</button> <h3>Font size</h3> <p> <input id="fontSize" type="range" min="1" max="5" step="0.5" value="0" /> </p>

Jquery 将仅处理 css class 切换。