jquery - Issue on Adding Animation Effect to Active Class -

can please take @ this demo , let me know why not able add animate effect active class through jquery

i have class called

.sliding-middle-out {     display: inline-block;     position: relative;     padding-bottom: 3px; } .sliding-middle-out:after {     content: '';     display: block;     margin: auto;     height: 3px;     width: 0px;     background: transparent;     transition: width .5s ease, background-color .5s ease; }  .sliding-middle-out:hover:after {     width: 100%;     background: blue; } 

now add same animation effect active class without having hover effect involeved. did merging hover part inthe after like

.sliding-middle-out:after {     content: '';     display: block;     margin: auto;     height: 3px;     width: 0px;     background: transparent;     transition: width .5s ease, background-color .5s ease;     width: 100%;     background: blue; } 

and adding class .sliding-middle-out .active class like

 $("button").click(function(){         $(".active").addclass("sliding-middle-out");  }); 

which adding class without animation effect.

you need style :after on .active class makes effect working. check this:

updated jsfiddle