如何在不失去过渡的情况下进行DOM操作？

Question

单击按钮，该行开始运行，再次单击将向后运行。 如果按下黄色按钮，我希望黄线位于黑色的顶部。 如果点击黑色按钮，然后黑线应该是更接近观众。 我!!!需要使用APPEND !!! 将绘画移动到DOM的底部即可。 但是，在这种情况下过渡将无法正常工作。 我尝试了setTimeout ，requestAnimationFrame和getComputedStyle 。 到目前为止没有运气。

var black = 33000,
yellow = 20000;

function pushBlack() {
document.getElementById('canv').appendChild(document.getElementById('pollBlack'));
    if(black > 0) {
        black = black - 33000;
        document.getElementById('pollBlack').style.strokeDashoffset = black;
    } 
    else {
        black = black + 33000;
        document.getElementById('pollBlack').style.strokeDashoffset = black;
}
}

function pushYellow() {
    if(yellow > 0) {
        yellow = yellow - 20000;
        document.getElementById('pollYellow').style.strokeDashoffset = yellow;
}
else {
    yellow = yellow + 20000;
    document.getElementById('pollYellow').style.strokeDashoffset = yellow;
}
}

#pollBlack {
    stroke-dasharray: 33000;
    stroke-dashoffset: 33000;
    transition: 5s linear;
}

#pollYellow {
    stroke-dasharray: 20000;
    stroke-dashoffset: 20000;
    transition: 5s linear;
}

<svg id="canv" width="500" heigth="250" viewBox="0 0 500 250">
    <path d="m-6.5,271.28333c0,0 1.16796,-3.92035 3,-8c4.41213,-9.82512 8.70232,-21.1433 17,-38c17.38181,-35.31108 34.94006,-78.47437 47,-104c10.12708,-21.43461 24.41398,-55.27487 53,-110c12.86429,-24.62742 22.40645,-46.07164 41,-72c12.01387,-16.75311 25.95667,-31.80134 35,-40c6.83038,-6.19241 8.36601,-10.77335 9,-10c3.23273,3.94328 -19.82974,42.56214 -38,78c-30.40533,59.30021 -49.74995,103.88499 -89,158c-33.93698,46.78975 -75.64786,101.24312 -93,126c-12.74393,18.18219 -21,26 -21,30c0,0 1.42597,-0.64642 8,-9c12.86875,-16.35223 26.41463,-38.72308 45,-67c28.64528,-43.58266 54.84937,-89.65502 103,-150c34.50163,-43.23931 72.6275,-79.41655 86,-91c14.67612,-12.71265 17.19194,-3.59243 4,22c-13.85175,26.87246 -48.27612,74.79105 -80,117c-43.37943,57.71677 -79.15108,96.3976 -104,132c-27.4841,39.37796 -36.24264,57.75735 -32,62c1.41421,1.41422 9.16339,-2.02704 20,-10c29.97637,-22.05487 66.53131,-40.1656 104,-73c59.57169,-52.20358 100.85739,-101.98824 164,-145c30.04993,-20.46954 51.46164,-32.57555 53,-30c7.5712,12.67584 -35.07263,52.92504 -65,82c-55.33972,53.76352 -98.61362,91.45189 -145,144c-25.33868,28.70456 -47.82951,46.83868 -45,50c4.27038,4.77115 13.80845,-13.19302 39,-38c32.7529,-32.25288 85.10809,-82.75879 128,-127c39.03601,-40.26401 54.88168,-69.52814 54,-70c-3.17892,-1.70131 -17.00491,10.31225 -54,40c-28.6987,23.03008 -64.19119,57.71613 -94,78c-36.23569,24.65715 -59.84467,32.87389 -55,39c6.20296,7.84367 107.09666,-75.36502 188,-151c23.24982,-21.73582 21.91171,-25.24762 16,-23c-21.3559,8.11949 -57.23796,23.68054 -115,56c-31.7301,17.75388 -79.8576,46.25737 -105,60c-14.91709,8.15356 -22.29289,12.70711 -23,12c-2.82843,-2.82843 7.81176,-23.08168 17,-44c8.82001,-20.08002 23.37511,-50.32625 33,-68c12.22152,-22.4418 20.09831,-31.91034 27,-34c1.91418,-0.57957 3.65985,2.02726 3,10c-3.01025,36.37222 -14.21079,61.72427 -33,89c-9.6606,14.024 -25.424,24.96326 -36,27c-11.78348,2.26929 -24.04567,-4.96027 -31,-13c-13.24671,-15.31419 -17.94955,-30.25783 -15,-47c2.0308,-11.52718 18.29712,-30.81513 44,-40c49.86465,-17.81901 110.99644,-14.92614 182,2c97.83685,23.32278 165.40152,44.11313 223,82c29.56171,19.44496 53.76801,62.63805 49,77c-18.93893,57.04663 -87.47815,67.92526 -140,71c-55.93994,3.27484 -142.34592,-20.67847 -205,-48c-61.48996,-26.81389 -93.79484,-45.75639 -103,-69c-3.33425,-8.41919 8.07124,-26.96928 36,-43c36.8979,-21.17888 115.91437,-31.99918 186,-34c84.96539,-2.42561 144.62317,-2.45381 188,17c13.15936,5.90176 17.638,22.19984 -6,39c-106.51688,75.70439 -286.14735,90.09056 -374,85c-43.21723,-2.5042 -89.32618,-15.73311 -95,-23c-1.3761,-1.76248 3.5528,-11.54672 12,-18c32.69656,-24.97868 98.63159,-42.04378 188,-73c71.7142,-24.841 168.58521,-57.48908 213,-61c12.95956,-1.02444 17.29816,2.21651 16,6c-7.40057,21.56923 -47.81195,48.20688 -126,78c-70.35181,26.80717 -169.67892,55.43562 -265,76c-9.96869,2.15062 -10.35253,-2.86551 0,-6c2.87128,-0.86935 5.85065,4.52573 5,4c-3.80423,-2.35114 0.13405,3.7159 18,0c4.03672,-0.83958 0.41468,3.53258 -20,19c-51.98024,39.38342 -91.74368,70.86472 -137,100c-56.52939,36.3927 -109.05135,61.27582 -95,71c34.96436,24.19699 90.28516,-77.82309 134,-126c53.94702,-59.45351 81.05957,-99.84753 88,-142c3.9025,-23.70169 -0.15529,-53.11604 -8,-64c-8.26905,-11.47269 -16,-14 -19,-14c-3,0 -8.28607,7.76173 -11,26c-3.83808,25.79282 -4.9705,67.26637 0,106c7.53867,58.74664 1.15983,118.18951 49,141c21.83206,10.40967 51.39615,-46.85117 64,-81c21.68449,-58.75188 29.56659,-100.71388 43,-142c15.28358,-46.97246 26.19307,-68.64951 49,-90c9.92952,-9.29542 21.7937,-11.8822 26,-9c10.75568,7.3699 14.49684,27.85393 16,51c3.11067,47.8991 -3.82964,87.84003 -15,148c-6.48271,34.91382 -9.18176,65.39307 -5,62c39.19766,-31.80475 153.27414,-317.8295 165,-293c31.33368,66.34908 58.29132,147.71364 28,201c-11.66339,20.51744 -49.19742,13.66025 -84,-38c-55.72949,-82.72377 -52.46622,-156.21714 -8,-182c68.02969,-39.44568 175.82883,0.40317 210,68c32.20563,63.70868 -0.69061,153.91476 -82,182c-84.20795,29.08643 -235.10944,-24.24478 -244,-110c-5.62648,-54.27101 103.65509,-113.83316 242,-92c94.35187,14.89032 182.51117,74.33865 176,122c-5.03552,36.85979 -87.65442,67.77602 -176,39c-99.11029,-32.28232 -146.62234,-113.54706 -114,-161c49.77563,-72.40433 151.6431,-92.66602 183,-67c33.91644,27.76103 36.4527,121.49706 5,203c-30.10934,78.02197 -76.67337,112.09198 -101,100c-71.57642,-35.57831 -102.40076,-111.25287 -115,-164c-3.26083,-13.65163 -2.3829,-25.44456 8,-34c9.00012,-7.41604 32.84744,-12.19713 46,-7c11.35242,4.48582 16.83429,14.91949 17,21c0.2467,9.05202 -7.86249,19.54112 -25,31c-22.68982,15.1714 -108.6615,46.4532 -190,55c-46.74266,4.91158 -54.59359,-2.81377 -48,-7c55.89751,-35.48901 130.96703,-56.37711 191,-80c64.15387,-25.24446 84.35815,-42.33023 96,-46c0.95374,-0.30064 -0.43018,-0.85196 -7,3c-14.14865,8.29552 -89.8028,60.85843 -156,96c-33.99107,18.04457 -31.76263,10.43283 -13,-14c60.5947,-78.9068 149,-140 138,-151c-4,-4 -12.86472,16.08357 -37,55c-19.88876,32.06925 -47.85513,73.5146 -68,110c-25.07852,45.42101 -52.54062,83.98267 -45,88c15.18419,8.08952 66.57007,-84.63939 119,-225c11.96918,-32.04277 7.44553,-52.00485 5,-50c-6.23489,5.11138 -17.19943,27.07199 -26,51c-12.14059,33.00918 -18.99457,76.77908 -21,104c-1.83682,24.93243 -0.61313,39.0824 2,38c1.84775,-0.76537 -3.79349,-36.90526 -34,-98c-28.2021,-57.0407 -48.50729,-77.8702 -49,-77c-5.7458,10.14819 14.17577,27.43632 33,62c18.21277,33.44093 41.99667,85.00369 73,113c41.41617,37.3992 66.46191,49.23337 87,53c13.80542,2.53188 39.0188,-12.56602 34,-31c-7.51331,-27.59621 -37.77402,-55.01015 -62,-50c-20.95746,4.33419 -23.01855,58.70123 38,122c53.16849,55.15533 74.05347,54.36118 82,53c2.20398,-0.37753 2.3439,-8.08337 0,-17c-6.11218,-23.25169 -13.21362,-52.40849 -42,-124c-23.03345,-57.28403 -34,-68 -34,-61c0,15 -8.75458,82.6151 13,176c12.19684,52.35681 21.59122,56.97079 21,51c-1.00488,-10.14841 -3.95502,-29.00824 -8,-51c-7.91205,-43.01627 -8.13321,-76.3564 -41,-127c-19.72607,-30.39542 -30.30252,-31.95315 -30,-31c6.29495,19.83365 47.62552,32.85425 41,47c-0.42416,0.90559 -10.20834,-0.59619 -26,-9c-46.64554,-24.82325 -78.41272,-47.34126 -116,-63c-39.43484,-16.42843 -63.58841,-28.35318 -75,-20c-9.81662,7.18568 5.58159,26.5062 15,23c24.52803,-9.13104 42,-60 50,-75c0,0 -4.71994,8.69139 -16,36c-13.89671,33.64344 -24.26097,77.90683 -37,114c-10.20969,28.92685 -22.82375,72.51375 -25,72c-7.786,-1.83803 22.04942,-53.68205 30,-140c6.69617,-72.69911 -18.44528,-109.70947 -29,-104c-27.32303,14.78013 -44.99504,111.74132 -48,164c-1.60739,27.95383 -1.28146,58.1033 0,66c0.50655,3.12144 2.40623,-6.05211 1,-25c-5.01375,-67.55637 -26.30943,-158.21435 -65,-207c-12.74965,-16.07627 -25.09524,-10.97996 -37,32c-19.05539,68.79602 -23.90816,136.34473 -18,181c3.62779,27.41968 15.01309,59.64165 25,56c12.35706,-4.50589 3.48398,-48.30029 -12,-121c-13.69332,-64.29225 -38.24245,-106.45784 -31,-110c2.54082,-1.24267 27.3534,46.34948 88,112c74.85089,81.02681 99.2924,126.36024 148,124c3.60132,-0.17451 -5.2263,-31.20943 -36,-98c-20.21243,-43.86864 -50.76599,-73.49294 -46,-76c3.19099,-1.67856 25.88887,39.42311 75,110c38.38367,55.16061 47.49841,68.44121 37,56c-47.58382,-56.38954 -86.7224,-145.05283 -149,-216c-22.86208,-26.04468 -29.75989,-26.73669 -27,-20c19.00042,46.3787 65.55299,115.86944 133,173c43.82068,37.11803 54.53574,33.09799 37,5c-43.33049,-69.4296 -101.33392,-119.96655 -86,-133c16.91801,-14.37988 65.79773,55.31054 124,93c49.82825,32.26678 53.8674,34.9223 28,2c-19.89532,-25.32145 -39.74185,-49.6188 -64,-82c-4.32349,-5.77126 -3.05872,-4.93415 16,12c16.948,15.05873 50.0575,48.56625 129,80c32.03561,12.75612 34.96661,8.02373 30,1c-7.04755,-9.96655 -22.30927,-30.23569 -65,-63c-18.92303,-14.52306 -18.1058,-7.47724 3,8c33.21005,24.35349 70.07312,28.12207 59,6c-24.81686,-49.57947 -60.77377,-65.22884 -58,-71c0.4332,-0.9013 2.87762,3.70238 34,23c10.64899,6.60297 27.39767,14.60233 36,6c8.60233,-8.60233 -9.082,-39.62012 -26,-54c-3.40753,-2.89632 -3.8468,7.18847 10,17c22.62646,16.03258 32.52982,17.73509 30,19c-6.32455,3.16228 -21.42932,-1.56098 -28,-46c-1.17014,-7.91396 4.22873,-12.18343 9,-6c43.1799,55.95978 48.09903,91.09902 43,86c-35.69315,-35.69314 -37.70547,-61.65381 -40,-60c-5.44199,3.92236 28.23175,109.90015 98,177c4.2027,4.04195 -6.0014,-26.38121 -46,-89c-17.33505,-27.13846 -47.31982,-72.60745 -57,-77c-0.91064,-0.41322 -0.53003,1.39278 7,11c19.6727,25.09949 35.297,42.38616 38,40c10.05798,-8.87901 -71.88641,-76.99152 -95,-63c-48.27924,29.22525 -28.43872,189.32671 67,190c23.02115,0.16241 37.93597,-52.69113 -17,-95c-15.03232,-11.57712 -47.61087,25.21716 -55,38c-24.72067,42.76552 -29.19592,46.06337 -18,33c40.03561,-46.71349 82.79669,-68.80963 80,-72c-24.91876,-28.42632 -113.92038,96.53976 -182,85c-28.25014,-4.78851 -34.73938,-37.09082 3,-55c18.09128,-8.58519 34.47345,16.87001 37,27c2.46793,9.89491 -11.77405,36.23581 -82,10c-46.27264,-17.28706 -89.92744,-77.116 -73,-88c23.56671,-15.1529 43.99966,13.19386 48,26c2.10837,6.74944 -8.68582,34.91936 -71,16c-53.17303,-16.144 -85.16349,-61.65247 -74,-71c37.76396,-31.62093 112.83804,63.28603 92,95c-28.00027,42.61436 -137.71163,42.73076 -144,14c-3.48059,-15.90237 16.44545,-88.27162 101,-170c10.97538,-10.60854 -11.6292,54.18926 -31,200c-4.48527,33.76215 -3.05778,35.65833 0,28c42.17631,-105.63219 193.33701,-228.84683 234,-260c14.76575,-11.31249 -76.60844,31.86449 -142,76c-27.189,18.35099 -63.49227,55.21157 -47,74c101.79137,115.96342 399.84583,-2.31544 425,-16c2.48456,-1.35166 -204.82016,-10.80135 -416,77c-25.8709,10.75624 113.00438,16.89203 204,16c102.01471,-1.00005 208.82379,-24.84488 193,-43c-96.2814,-110.46669 -262.09039,-116.8581 -286,-30c-23.18724,84.23392 235.45923,101.77121 328,122c41.22839,9.01224 53.38397,22.70377 -107,38c-177.26584,16.90631 -219.25703,1.87711 -191,-4c29.77658,-6.19315 136.95355,9.08487 141,-30c0.46054,-4.44836 -14.12158,-3.03619 -27,-1c-58.93365,9.3179 -225.76001,64.5127 -231,53c-5.38535,-11.83206 96.05475,-163.76862 259,-304c82.77036,-71.23251 82.91693,-41.38072 27,38c-43.0835,61.16217 -73.24475,134.46011 -193,190c-118.71648,55.05814 -162.67113,-9.77101 -128,-49c100.15555,-113.32196 200.98209,-125.32735 198,-125c-9.16449,1.00601 -34.86105,-25.8544 -210,-34c-39.16226,-1.82141 39.74007,65.42608 121,22c44.09793,-23.56635 26.869,-46.85849 18,-34c-73.25899,106.21262 -8.0533,258.18378 30,280c78.29041,44.88443 154.32834,-40.5798 134,-100c-12.16757,-35.56613 -41.82431,-100.28457 -158,-156c-202.54711,-97.13736 -266.86106,-25.10636 -260,-16c78.84598,104.64851 290.71655,124.57594 298,87c16.84589,-86.90924 -284.91912,-18.03058 -288,23c-1.25516,16.716 164.49649,205.46872 330,19c23.57233,-26.55835 -163.77036,-213.37337 -233,-95c-21.99397,37.60672 135.23033,76.79382 185,72c36.50528,-3.5162 24.34442,-19.42384 28,-22c54.3443,-38.29747 168.45929,163.98093 164,167c-12.42102,8.40942 -113.41788,15.2865 -314,-180c-49.0843,-47.78841 12.94142,-111.72481 46,-123c117.0712,-39.92912 178.04599,-5.69358 136,131c-28.13959,91.48314 -81.8096,91.45863 -64,50c49.80869,-115.94867 119.48975,-126.29896 109,-66c-21.11978,121.4041 -52.13434,151.69785 -41,137c8.70877,-11.49597 68.14255,-110.10463 198,-258c21.46112,-24.44218 24,-20 24,-14l0,8l-6,11" id="pollBlack" stroke-width="1.5" stroke="#000" fill="none" />
    <path d="m-8.5,188.28333c0,-1 4.22428,-4.83661 10,-13c6.2474,-8.83006 18.31067,-25.74777 28,-38c18.60887,-23.53104 33.19212,-47.87421 58,-82c16.26336,-22.37193 42.77296,-57.10536 54,-81c12.74344,-27.12203 21.33748,-41.82385 28,-55c9.48685,-18.76166 10.92712,-30.68724 18,-34c0.90559,-0.42416 -0.78386,9.08362 -9,30c-16.56596,42.17308 -36.43579,84.22696 -65,139c-22.12768,42.43072 -56.3363,108.78645 -81,148c-29.4031,46.74887 -44.16408,71.65948 -53,82c-6.43101,7.52609 -8,9 -8,9c6,-5 15.7882,-13.48105 34,-42c18.82959,-29.48637 40.58294,-65.44806 86,-114c42.55237,-45.48951 91.48744,-100.57258 116,-122c11.76064,-10.28044 13.2648,-9.85625 11,-6c-13.48459,22.96009 -30.43068,54.39911 -63,99c-27.18556,37.22829 -72.55857,82.61107 -94,114c-23.62297,34.58258 -31.7013,46.94855 -30,48c3.80423,2.35114 18.06726,-22.30476 36,-51c37.27099,-59.63953 66.16075,-107.2864 103,-158c17.16502,-23.62969 37.69363,-42.73038 44,-47c1.17107,-0.79285 1.28474,0.00676 1,6c-1.00113,21.07125 -8.08983,42.12627 -16,76c-6.65707,28.5076 -9.57204,65.07309 -12,78c-1.70187,9.06111 -5.07613,16.38269 -6,16c-3.91969,-1.62358 -15.07175,-19.96933 -30,-55c-25.12085,-58.94865 -40.305,-100.85473 -54,-130c-16.36629,-34.83022 -24.62865,-50.74675 -22,-55c1.17557,-1.90211 8.47327,-2.38041 19,2c35.15651,14.62943 79.88857,46.97139 123,89c60.79193,59.26502 97.72403,102.6516 111,157c4.27795,17.51283 -9.1347,39.03665 -26,45c-39.5751,13.99323 -84.11543,13.23792 -141,-4c-85.13208,-25.79785 -139.24392,-60.371 -196,-105c-24.55803,-19.31071 -32.97752,-30.63345 -30,-31c24.55328,-3.02264 73.22792,-14.38638 159,8c74.35324,19.40608 173.63385,44.32095 242,83c64.58276,36.53854 91.22217,62.52979 90,75c-0.76181,7.77301 -18.08218,15.09314 -71,22c-60.51947,7.89905 -158.19261,3.50311 -242,-8c-90.23635,-12.38553 -144,-20 -199,-20c-9,0 -8.01403,0.07147 2,2c26.9636,5.19272 101.06976,19.49191 183,31c109.09709,15.32401 196.79712,23.048 296,-6c63.4639,-18.58313 98.78766,-42.33571 114,-83c10.03339,-26.82036 8.52905,-73.78456 -12,-110c-30.09766,-53.09549 -75.00531,-83.41366 -121,-108c-56.86084,-30.39481 -101.63708,-42.6292 -147,-35c-27.13258,4.5632 -54.14012,27.67554 -59,50c-8.93639,41.05047 2.90933,75.90807 22,117c26.19736,56.38881 42.8159,91.52199 71,105c9.20016,4.39964 22.43863,-0.8176 26,-10c5.71747,-14.74146 8.91095,-28.28517 6,-43c-3.56784,-18.03526 -13.73682,-25.50388 -21,-26c-7.05463,-0.48189 -22.61446,16.51712 -39,38c-29.11621,38.17389 -43.90158,68.86575 -52,104c-7.91251,34.32773 -10.0441,50.66437 -4,56c1.49936,1.32361 8.26447,-4.77759 20,-19c27.63242,-33.48804 49.53015,-65.59354 67,-100c23.54208,-46.36562 35.9679,-73.2393 40,-105c1.63724,-12.89649 -2.08429,-23.54963 -8,-26c-8.36609,-3.46535 -18.29938,-2.15268 -36,10c-17.52699,12.03347 -30.45303,28.16565 -27,52c2.76912,19.11366 30.22314,45.60823 64,60c50.93188,21.70125 94.56729,28.61971 150,12c31.31824,-9.38976 50.57629,-28.75179 49,-42c-0.79257,-6.66122 -22.2475,-23.23524 -133,-51c-67.15347,-16.83483 -157.12624,-20.72416 -212,-17c-44.30529,3.0069 -56.89766,14.26726 -55,19c4.54282,11.32973 33.03177,13.22585 111,11c70.08563,-2.00081 153.4707,-17.43159 194,-33c30.47839,-11.70758 35.48846,-24.20166 32,-27c-9.64859,-7.73982 -28.96085,-6.51073 -77,-7c-47.00821,-0.47878 -117.2299,14.76978 -155,31c-31.23804,13.42332 -43.42262,28.78918 -33,44c4.07605,5.94859 12.22836,5.14806 15,4c5.22626,-2.16478 13.14034,-12.10878 21,-34c6.96626,-19.40286 9,-31 13,-41c2,-5 2,-6 2,-3c0,4 -0.95769,15.41748 -5,24c-8.0396,17.06941 -24.05753,31.92036 -49,50c-37.08592,26.88187 -62.53271,39.01236 -92,52c-9.85553,4.3438 -11.02647,3.93991 -2,0c13.95969,-6.0932 39.92376,-23.46985 95,-46c55.03734,-22.51425 141.34912,-46.04389 186,-54c36.63849,-6.52843 50.59738,-6.35785 54,0c1.88742,3.5267 -1.85934,11.07484 -17,26c-18.69327,18.4272 -60.39868,41.69736 -95,53c-54.19089,17.70164 -96.56937,26.59027 -146,19c-42.22511,-6.48383 -104.29557,-15.74805 -130,-72c-13.3062,-29.11949 12.88227,-59.74239 29,-70c33.6823,-21.43602 80.70251,-26.71474 122,-19c52.23766,9.75846 74.81953,25.62341 91,42c7.60233,7.69447 6.01163,20.84693 0,27c-13.97678,14.30559 -36.43304,24.47961 -69,28c-49.71042,5.37355 -89.16058,0.88307 -141,-9c-24.08157,-4.59109 -37.52403,-9.87088 -33,-12c50.25542,-23.65149 204.40945,-16.89717 292,3c44.22739,10.04675 81.29776,32.5862 83,45c1.8125,13.21797 -12.19901,29.57565 -37,45c-50.89355,31.65195 -103.88777,42.97403 -171,42c-45.17267,-0.65561 -97.49516,-18.06583 -123,-37c-18.16821,-13.48764 -21.85393,-29.86736 -16,-44c15.17763,-36.64204 40.81898,-60.4426 100,-81c112.12506,-38.9483 194.17004,-16.63756 213,-5c1.203,0.7435 1.06586,2.14429 -1,3c-2.92157,1.21015 -9,2 -15,2c-8,0 -13.81787,-3.55272 -19,-14c-4.78595,-9.64857 -8.99707,-21.88535 -10,-35c-0.45749,-5.98253 -2,-9 -3,-9c-1,0 -3.66656,0.73129 -5,5c-2.10837,6.74943 -7.99762,37.85403 -10,79c-0.72913,14.98227 1.38248,34.1436 4,44c1.62332,6.11269 3.04556,5.0148 4,2c3.15112,-9.95341 16.30563,-34.8212 32,-62c18.35989,-31.79488 24.1673,-53.16756 30,-80c1.75162,-8.05803 3.1387,-9.99033 3,-9c-1.00977,7.20974 -3,15 -3,23c0,10 -1.00766,12.2765 -6,12c-18.08307,-1.00153 -89.95914,-24.1229 -162,-48c-87.95039,-29.15013 -192.28408,-50.52401 -214,-47c-9.36433,1.51962 -11.73661,9.89289 -1,18c40.51999,30.59625 111.93597,65.77821 204,134c47.84395,35.45358 91.48148,93.98927 137,97c6.31076,0.41742 5.43808,-23.62144 -12,-62c-16.64993,-36.64397 -35.11908,-62.07581 -52,-75c-11.4514,-8.7673 -13.38458,-9.7882 -14,-9c-2.53741,3.24986 -0.14145,28.096 12,25c0.96899,-0.24709 0.63922,-8.21512 -2,-15c-2.43188,-6.25188 -2.55217,-7.65374 5,-2c28.91888,21.64942 93.45673,57.2961 99,55c1.30655,-0.5412 0.94336,-2.91753 -2,-5c-8.16339,-5.77573 -17.6441,-13.88051 -39,-22c-14.77924,-5.61906 -24.20422,-7.01066 -34,-5c-7.46024,1.53127 -28.93314,9.38551 -31,29c-1.98833,18.8692 21.91745,38.16615 40,32c28.78619,-9.8161 36.53207,-39.26759 40,-56c4.06396,-19.60827 1.50125,-31.10627 -4,-37c-4.92047,-5.27151 -8.29871,-6.05146 -10,-5c-1.9021,1.17557 -1.96152,7.18 0,15c3.38873,13.50986 9.14026,21.39555 15,33c2.6283,5.205 6.18875,8.58471 7,8c5.13074,-3.69804 2.62872,-31.08842 -20,-54c-14.05402,-14.2297 -24,-12 -24,-12c0,1 3.56879,6.47364 20,21c17.55429,15.51924 47.98279,33.03763 72,44c10.99216,5.01723 17.97324,5.22975 17,5c-4.35251,-1.02749 -14.14258,-6.72446 -24,-12c-21.32486,-11.41272 -23.28781,-11.62632 -13,-4c34.09247,25.27261 74.79025,46.99023 82,48c1.98068,0.2774 3.29816,-4.21651 2,-8c-3.70029,-10.78461 -13.8786,-20.32338 -29,-32c-10.31976,-7.96884 -22.93796,-9.49829 -29,-10c-1.99319,-0.16496 -4.53125,2.43234 -2,5c13.63113,13.82724 27.07639,18.77396 28,17c5.63712,-10.82696 -22.69263,-33.1162 -42,-45c-4.58606,-2.82275 -11.31,-2.66251 -14,-1c-6.01501,3.71748 -9.75549,9.80382 -12,20c-3.04034,13.81145 -0.01511,25.63115 2,42c0.85529,6.94756 3.41422,12.58578 2,14c-2.82843,2.82843 -11.54056,-6.88969 -53,-12c-37.76678,-4.65515 -51.34918,-1.32085 -46,1c6.67859,2.89764 17.94672,3.49873 25,4c0.9975,0.07089 0,1 -4,1c-12,0 -33.02608,-1.51454 -77,0c-29.05165,1.0006 -72.13229,7.32466 -84,10c-7.10189,1.60098 -5.99158,5.25848 2,1c15.02881,-8.00844 19.81639,-39.39243 43,-50c28.42311,-13.00488 38.63049,-4.04602 42,3c2.19983,4.60008 0.13948,16.07723 -6,27c-10.75735,19.13843 -18.4048,31.36758 -26,43c-7.43613,11.38876 -12.62532,18.41362 -17,22c-2.78833,2.28587 -8.34395,3.55693 -19,-7c-15.20329,-15.06187 -20.36917,-43.94763 -4,-54c20.89059,-12.82899 49.22292,-0.83636 59,7c8.29466,6.64819 12.00533,16.10211 11,21c-1.53127,7.46024 -8.0394,16.07622 -18,24c-7.38283,5.87314 -24.03636,9.80824 -33,9c-11.13516,-1.00406 -29.67661,-8.85558 -43,-21c-19.968,-18.20107 -30.43559,-51.17326 -14,-63c32.68019,-23.51605 146.14697,-9.85303 192,36c7.9057,7.9057 -36.3018,53.47595 -80,58c-22.87772,2.36852 -56.32199,2.25015 -78,-2c-36.93979,-7.24236 -49.88705,-17.76125 -53,-29c-1.86854,-6.746 20.57573,-32.10292 91,-30c98.43454,2.93933 156.63907,47.37234 152,64c-5.71338,20.47821 -33.64136,27.23291 -58,30c-47.70361,5.41902 -81.06583,1.21771 -131,-14c-42.05624,-12.81688 -91.65348,-26.25482 -116,-59c-12.64308,-17.00449 -11.29462,-47.88547 4,-57c203.08235,-121.02296 320.26535,-40.31246 419,-9c94.38733,29.93376 104.89087,60.61377 72,74c-98.45935,40.07193 -187.13074,28.15237 -253,24c-79.47264,-5.00992 -134.09129,-16.29881 -171,-40c-8.94469,-5.7439 -7.69221,-18.31732 8,-28c28.60777,-17.65206 98.96666,-26.25509 158,-26c94.0842,0.40655 172.57938,-5.23476 206,44c10.12497,14.91594 -47.77826,58.6507 -148,74c-110.8194,16.97237 -217.03517,-6.70258 -226,-18c-5.31094,-6.69283 -0.31274,-21.91594 15,-31c39.29964,-23.31392 82.78214,-30.99736 193,-35c43.97101,-1.59683 60.35443,1.01257 60,6c-0.70175,9.87459 -45.70499,30.45265 -110,40c-64.36345,9.55751 -91.51492,8.11638 -109,-6c-18.56,-14.98421 1.90858,-59.90471 17,-77c14.97488,-16.96328 59.30194,-45.19998 93,-64c42.18082,-23.53251 64.33783,-36.14941 83,-37c11.16873,-0.50905 12.68619,4.03937 12,10c-3.5231,30.60372 -22.11447,77.84072 -28,123c-2.46902,18.94476 0.99863,20.0787 2,1c1.8345,-34.95189 -1.18747,-57.10063 -16,-74c-10.29623,-11.7468 -25.50424,-21.28511 -48,-23c-13.99506,-1.06687 -27.87706,6.81396 -33,17c-8.39384,16.68962 -3.32643,61.99361 39,99c54.35547,47.5235 127.66388,49.91481 161,13c30.89545,-34.21214 13.09067,-62.99986 -9,-72c-9.44427,-3.84778 -22.72803,-3.5216 -31,4c-6.97989,6.34673 -11.92218,20.15495 -10,32c2.02615,12.48578 23.59134,41.92574 45,33c24.36774,-10.15944 25.6749,-53.74939 8,-83c-25.6405,-42.43307 -51.48627,-44.17625 -52,-42c-3.44629,14.59874 2.48038,25.43469 -1,38c-2.98441,10.77466 -9.22421,21.95776 -11,32c-2.29031,12.952 -5.65833,27.54865 9,39c18.73141,14.63332 56,5 70,-3l-1,-8l-4,-1" id="pollYellow" stroke-width="1.5" stroke="lime" fill="none"/>
</svg><br>

<button onclick="pushBlack()" id="butBlack">BLACK</button>
<button onclick="pushYellow()" id="butYellow">YELLOW</button>

Answer 1

您可以检测动画何时结束， 并使用jQuery控制DOM中的顺序

这是使用pushYellow函数的示例：

function pushYellow() {
    if(yellow > 0) {
        yellow = yellow - 20000;
        this_stroke = document.getElementById('pollYellow');
        this_stroke.style.strokeDashoffset = yellow;
        // WAIT FOR ANIMATION TO END, THEN CALLBACK
        $('#pollYellow').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
        function(e) {
            // INSERT YELLOW LINE AFTER BLACK
            $('#pollYellow').insertAfter($('#pollBlack').get(0))
        });
        }
    else {
    yellow = yellow + 20000;
    document.getElementById('pollYellow').style.strokeDashoffset = yellow;
    }
}

显然，这仅在动画完成时将“黄色”线置于黑色上方。 由于您尝试使用setTimeout，因此我假设这样做很好。