当我通过javascript设置stroke-dasharray和stroke-dashoffset时，transfrom和animation设置为在<path>中不起作用

Question

    var menuLine = document.querySelector(".menu .main-menu svg .oval-menu.white");
    var pathLength = menuLine.getTotalLength();
    menuLine.style.strokeDasharray = pathLength;
    menuLine.style.strokeDashoffset = pathLength;

如果我通过js设置stroke-dasharray和stroke-dashoffset。我在CSS中设置的变换和动画不起作用

svg .oval-menu.white {
    /*stroke-dasharray: 113.113;
    stroke-dashoffset: 113.113;*/ if i set two line when begin. it work

    transition: all 0.8s ease-out 0s;
    stroke-opacity: 0.3;
    stroke-width: 2;
    stroke: #FFFFFF;    
    transform: translate(74.941125px, 33.941125px) scale(1, -1) rotate(45deg) translate(-74.941125px, -33.941125px);

}
.svg:hover .oval-menu.white {
    stroke-dashoffset: 0;
    stroke: #FFFFFF;
    stroke-opacity: 1;
}