::之前的寬度轉換元素

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;} 
 
\t 
 
#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%;} 
 
\t 
 
#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>

還要檢查檢查小提琴鏈接click here

Answer 2

#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:last-child a span::before{ 
    left:0; 
} 
#formSwitch li:first-child a span::before{ 
    right:0; 
} 

Answer 3

更新了CSS代碼，我認爲你正在尋找這個時，綠框移動白色文本應該相應地顯示。替換CSS代碼，讓我知道這是否工作，或者你正在尋找別的東西。另外，如果您將動畫速度從3秒減至7秒，則您可以清楚地看到要查找的動畫類型。

#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);float:left;margin:0;padding: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 3s cubic-bezier(0.7, 0.3, 0, 1); transition: width 3s 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.selected span::before{width:100%;} 
    #formSwitch li a span::before{ 
    content:attr(data-letters); 
    position:absolute; 
    color:#fff; 
    overflow:hidden; 
    white-space:nowrap; 
    width:0%; 
    -webkit-transition: all 3s cubic-bezier(0.7, 0.3, 0, 1); 
    transition: all 3s cubic-bezier(0.7, 0.3, 0, 1); 
    } 
    #formSwitch li a.selected span::before{ 
    display:none; 
    } 
    #formSwitch li a span{ 
    color:#999; 
    -moz-transition:all linear 3s; 
    -webkit-transition:all linear 3s; 
    -ms-transition:all linear 3s; 
    -o-transition:all linear 3s; 
    transition:all linear 3s; 
    } 
    #formSwitch li a.selected span{ 
    color:#fff; 
    -moz-transition:all linear 3s; 
    -webkit-transition:all linear 3s; 
    -ms-transition:all linear 3s; 
    -o-transition:all linear 3s; 
    transition:all linear 3s; 
    } 
    #formSwitch li:last-child a span::before{ 
    left:0; 
    } 
    #formSwitch li:first-child a span::before{ 
    right:0; 
    }