How to animate active tab when it changes-CodePudding

I have a tab list of li items. when an item is active the li item has rounded corners and box shadow. I want to be able to show animation of the active pill moving to its next position when it changes but dont quite know how to achieve it. this is what i've done.

ul {
  display: flex;
  list-style-type: none;
  padding: 4px;
  margin: 0;
  background: #efefef;
  border-radius: 44px;
}

li span {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 7px 16px;
  transition:all 0.7s;
  &.active {
    border-radius: 50px;
    background: #ffffff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
    transition:all .5s;
  }

  &:hover {
    cursor: pointer;
  }
}
<ul>
   <li class="active"><span>one</span></li>
   <li><span>two</span></li>
</ul>

I have a react codesandbox here where u can see it in action https://codesandbox.io/s/wizardly-shannon-8yfuf?file=/src/TabItem.jsx

CodePudding user response：

As you tagged the question with css I am answering with what I would do in your case (if I understood right the animation you want to do).

I don't know about reactjs (apologise in advance) but I think if you want to "move" the effect create to your <a> element to next... it's goign to be difficult (if possible at all).

I would place a box under your link with the style you are actually giving to the link, positioned absolute and just by clicking in the links with a simple javascript change the position to move it under the other link.

like this:

$(".li1").on("click", function(){
        $(".btn").attr('class', 'btn');
    $(".btn").addClass("eff1");
});
$(".li2").on("click", function(){
    $(".btn").attr('class', 'btn');
    $(".btn").addClass("eff2");
});
$(".li3").on("click", function(){
    $(".btn").attr('class', 'btn');
    $(".btn").addClass("eff3");
});
$(".li4").on("click", function(){
        $(".btn").attr('class', 'btn');
    $(".btn").addClass("eff4");
});

div {
    display:inline-block; 
    text-align:center;
    position:relative;}
ul{
    display: flex;
    list-style-type: none;
    padding: 4px;
    margin: 0;
    background: #efefef;
    border-radius: 44px;     
}
li {
  position:relative;
  z-index:1;
}
li a {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 7px 16px;
    -webkit-transition: all 0.7s;
    transition: all 0.7s;
}
.btn {
  background-color:#fff;
  border-radius: 44px; 
  height:calc(100% - 8px);
  width:90px;
  position:absolute;
  top:4px;
  left:4px;
  transition:left 0.51s ease;
}
.eff1 {left:4px;}
.eff2 {left:90px;}
.eff3 {left:180px;}
.eff4 {left:270px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
  <ul class=" XTdVG">
    <li class="li1"><a href="#">wwwww</a></li>
    <li class="li2"><a href="#">wwwww</a></li>
    <li class="li3"><a href="#">wwwww</a></li>
    <li class="li4"><a href="#">wwwww</a></li>
  </ul>
  <div class="btn"></div>
</div>

Note: if your links are goign to have different widths... just add it to the .eff1, .eff2, .eff3, .eff4