Arrow Tabs das Pixel Perfect Way

Question

Versuchen, einige Pfeil Tabs die Pixel perfekt Weg nach this tutorial zusammen mit einigen jQuery-Animation zu tun. Sie können sehen, was ich bisher in this JSFiddle habe. Irgendwie kann ich es nicht winden, es sieht nicht perfekt aus. Und ich weiß nicht, wie man die ::before Pseudoelemente animiert.

Answer 1

Sie können alle tun, die Animation selbst die div es selbst mit css transition ex. transition: all 0.6s ease wie dieses Beispiel: https://jsfiddle.net/cr6rLohs/1/

.tab-wrapper .tab-nav .tab { 
    background-color: white; 
    border: green 1px solid; 
    box-sizing: border-box; 
    color: green; 
    cursor: pointer; 
    display: inline-block; 
    height: 20px; 
    line-height: 20px; 
    margin-right: -1px; 
    position: relative; 
    text-align: center; 
    vertical-align: middle; 
    width: 60px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; transition: all 0.6s ease; 
} 

.tab-wrapper .tab-nav .tab.active { 
    background-color: green; 
    color: white; 
} 

.tab-wrapper .tab-nav .tab::before { 
    background-color: white; 
    border: green solid; 
    border-width: 0 0 1px 1px; 
    content: ''; 
    display: inline-block; 
    height: 20px; 
    left: -12px; 
    position: absolute; 
    transform: scale(0.707) rotate(45deg); 
    top: -1px; 
    width: 20px; 
    -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; transition: all 0.6s ease; 
} 

.tab-wrapper .tab-nav .tab.active::before { 
    background-color: green; 
} 

.tab-wrapper .tab-nav .tab.active{ 
    background:green; 
    color:white; 
} 

.tab-wrapper .tab-content .tab { 
    display: none; 
} 

.tab-wrapper .tab-content .tab.active { 
    display: inline-block; 
} 

js:

jQuery(function() { 
    jQuery('.tab-nav .tab').click(
    function() { 
     var id = this.className.match(/tab-(\d+)/)[1]; 
     jQuery(this).addClass('active') 
     .siblings().removeClass('active'); 
     jQuery('.tab-content .tab-' + id) 
     .addClass('active').show() 
     .siblings().removeClass('active').hide(); 
    } 
); 
}); 

Answer 2

Fügen Sie die Pseudo-jQuery-Plugin auf Ihrer Seite oder fügen Sie sie jQuery Skript:

http://jquery.lukelutman.com/plugins/pseudo/jquery.pseudo.js

Dann sind Sie Pseudo-Elemente wie diese animieren:

$('#element:before').animate({...});