Animating a border when class is applied?

Issue

How do we animate the change to a border that occurs when a class is applied.

For example:

el-item {
    border-left: 6px solid red;
}

 el-item.onSelected {
    border-left: 6px solid blue;
}

When the onSelected class is added to the el-item element, the border color changes to blue. How do we animate that transition?

Solution

You can add in css

.el-item{
    border-left: 6px solid red;
    transition: all .5s;
}

and

.el-item.onSelected{
    border-color: blue;
}

I create a exemple here: codepen

Answered By - sauloduarte