css - 宽度过渡 on::before 元素

Question

我在“toogle”元素上遇到一个 CSS 问题，无法从两种不同的形式切换。

正如你在这里看到的https://jsfiddle.net/7o6mchvn/开关左侧的::before 元素(内容文本)，过渡不会在右侧进行。

#formSwitch li a span::before{content:attr(data-letters); position:absolute; color:#fff; overflow:hidden; white-space:nowrap; width:0%; -webkit-transition: all 0.65s cubic-bezier(0.7, 0.3, 0, 1); transition: all 0.65s cubic-bezier(0.7, 0.3, 0, 1);}
#formSwitch li a.selected span::before{width:100%;}

绿色部分向右，但文字向左。

我找不到解决这个问题的方法。有任何想法吗 ？

Answer 1

我想这就是你需要的，请检查下面的代码，我在这里添加了两行

#switchIngr a span:before{ 
   right:0;
}

#switchHour a span:before { 
   left:0;
}

请检查代码段

$( "#formSwitch a" ).click(function() {
  $( "#formSwitch a" ).each(function() {
    if ($(this).hasClass('selected')){
      $(this).removeClass('selected'); 
    } else {
      $(this).addClass('selected');
    }
  });
});

#formRightSide #formSwitch{position:relative; text-align:center; text-transform:uppercase; font-size:.6em; line-height:1.1em;}
#formSwitch li{position:relative; display:inline-block; background:red ; color:#999; -webkit-transform: translate3d(0,0,0);}
#formSwitch li#switchIngr{border-top-left-radius:11px; border-bottom-left-radius:11px;}
#formSwitch li#switchHour{border-top-right-radius:11px; border-bottom-right-radius:11px;}
#formSwitch li a{display:inline-block; overflow: hidden; line-height: 1; color: #999; text-decoration:none;}
#formSwitch li#switchIngr a{padding:.6em .6em .6em 1em; border-top-left-radius:11px; border-bottom-left-radius:11px;}
#formSwitch li#switchHour a{padding:.6em 1em .6em .6em; border-top-right-radius:11px; border-bottom-right-radius:11px;}
	
#formSwitch li a::after{content:''; position:absolute; height:100%; width:0%; top:0; z-index:-1; background:#58bb9c; -webkit-transition: width 0.65s cubic-bezier(0.7, 0.3, 0, 1); transition: width 0.65s cubic-bezier(0.7, 0.3, 0, 1);}
#formSwitch li#switchIngr a::after{right:0; border-top-left-radius:11px; border-bottom-left-radius:11px;}
#formSwitch li#switchHour a::after{left:0; border-top-right-radius:11px; border-bottom-right-radius:11px;}
#formSwitch li a.selected::after{width: 100%;}
	
#formSwitch li a span {position:relative; display:block;}
#formSwitch li a span::before{content:attr(data-letters); position:absolute; color:#fff; overflow:hidden; white-space:nowrap; width:0%; -webkit-transition: all 0.65s cubic-bezier(0.7, 0.3, 0, 1); transition: all 0.65s cubic-bezier(0.7, 0.3, 0, 1);}
#formSwitch li a.selected span::before{width:100%;}
#switchIngr a span:before{ right:0;}
#switchHour a span:before { left:0;}

<ul id="formSwitch">
  <li id="switchIngr">
    <a href="#" class="selected">
      <span data-letters="ingredient">ingredient</span>
    </a>
  </li><li id="switchHour">
  <a href="#">
    <span data-letters="hour">hour</span>
  </a>
  </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

同时检查 fiddle 链接 click here