antd css3实现的箭头切换

.my-icon {
    transition: -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
    transition: transform .3s cubic-bezier(.645, .045, .355, 1);
    transition: transform .3s cubic-bezier(.645, .045, .355, 1), -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
    position: absolute;
    top: 50%;
    right: 6px;
    width: 10px;
    &:after {
        content: '';
        position: absolute;
        vertical-align: baseline;
        background: #fff;
        background-image: linear-gradient(to right, rgba(0, 0, 0, .65), rgba(0, 0, 0, .65));
        width: 6px;
        height: 1.5px;
        border-radius: 2px;
        -webkit-transform: rotate(45deg) translateX(-2px);
        transform: rotate(45deg) translateX(-2px);
        transition: all .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1), -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
        transition: all .3s cubic-bezier(.645, .045, .355, 1), transform .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1);
        transition: all .3s cubic-bezier(.645, .045, .355, 1), transform .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1), -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
    }
    &:before {
        content: '';
        position: absolute;
        vertical-align: baseline;
        background: #fff;
        background-image: linear-gradient(to right, rgba(0, 0, 0, .65), rgba(0, 0, 0, .65));
        width: 6px;
        height: 1.5px;
        border-radius: 2px;
        -webkit-transform: rotate(-45deg) translateX(2px);
        transform: rotate(-45deg) translateX(2px);
        transition: all .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1), -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
        transition: all .3s cubic-bezier(.645, .045, .355, 1), transform .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1);
        transition: all .3s cubic-bezier(.645, .045, .355, 1), transform .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1), -webkit-transform .3s cubic-bezier(.645, .045, .355, 1);
    }
}
.ant-menu-submenu-open .my-icon {
    &:after {
        -webkit-transform: rotate(-45deg) translateY(-2px);
        transform: rotate(-45deg) translateY(-2px);
        background: linear-gradient(to right, #1890ff, #1890ff);
    }
    &:before {
        -webkit-transform: rotate(45deg) translateY(-2px);
        transform: rotate(45deg) translateY(-2px);
        background: linear-gradient(to right, #1890ff, #1890ff);
    }
}