简体   繁体   中英

How to make DOM manipulations without losing transition?

Click on the button and the line starts to run, click again and it runs backwards. If YELLOW button is pushed I want yellow line to be on top of the black one. And if BLACK button is clicked then black line should be closer to the viewer. I !!!NEED TO USE APPEND!!! to move the paintings to the bottom of DOM to do it. However, in this case transition stops working properly. I tried setTimeout , requestAnimationFrame and getComputedStyle . No luck so far.

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>

You can detect when animations end, and control the ordering in the DOM using jQuery

Here is an example using your pushYellow function:

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;
    }
}

Obviously, this only places the "yellow" line above the black when the animation is finished. Since you were trying to use setTimeout, I'm assuming this is fine.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM