Question

我正在编写一个程序，您输入的字母数应该调用不同的svg动画。下面是我输入一个字母长度的例子。问题是，如果你把同一个字母或者任何其他一个角色，过渡不起作用。我尝试了很多东西，包括带有“from”和“to”的动画，但没有解决问题。

var TXT = document.getElementById('txtinpt');
var DASH, IDNAME = 'sig1';

TXT.addEventListener("blur", letter);

function letter() {

    document.getElementById(IDNAME).style.transition = "none";
    document.getElementById(IDNAME).style.strokeDashoffset = DASH;

        if (TXT.value.length == 1) {
            document.getElementById('sig1').style.transition = ".8s linear";
            document.getElementById('sig1').style.strokeDashoffset = "0";
            DASH = '900';
            IDNAME = 'sig1';
    }
}

#sig1 {
        stroke-dasharray: 900px;
        stroke-dashoffset: 900px;
}

<input id="txtinpt" type="text" />

<svg viewBox="-50 50 200 200" width="300" height="180" style="background-color: orange">
        <path fill="none" stroke="#000" stroke-width="2" id="sig1" 
        d="m64.5,222.28333c-1,1 -2,1 -4,1c-4,0 -7.513,0.40602 -9,-2c-3.32501,
        -5.37999 -5.99594,-22.86484 -7,-34c-1.34708,-14.93939 0.38828,
        -24.33003 6,-34c3.61945,-6.23694 9.64749,-10.97249 14,-12c1.9465,
        -0.45949 2.29291,-0.70711 3,0c3.53552,3.53554 1,12 1,19c0,5 0,10 0,
        14c0,1 0.57956,0.91418 0,-1c-1.04483,-3.45085 -5.47739,-6.63243 -10,
        -13c-3.3765,-4.75388 -7.39902,-10.8981 -9,-18c-1.33768,-5.93384 -2.68976,
        -10.03406 -2,-16.99999c0.50244,-5.0742 2.31732,-8.31069 11,-12c7.58951,
        -3.22482 13.93796,-6.49829 20,-7c1.99319,-0.16496 2,1 2,3c0,2 -0.17194,
        5.56063 -1,5c-4.45929,-3.01908 -6.47394,-14.22683 -11,-24c-8.08334,
        -17.45451 -14,-25 -18,-29c-1,-1 -1,0 -1,9c0,11 3.33633,32.93664 6,
        48c2.29031,12.95199 3.26926,28.50887 7,37.99999c5.58417,14.20624 11.49622,
        18.90779 12,23c0.12219,0.99251 -0.0535,1.54051 -2,2c-2.17624,0.51375 -5.2771,
        1.77199 -9,0c-4.51468,-2.14885 -7.51373,-2.82375 -7,-5c0.68927,-2.91974 7.8858,
        2.32422 16,5c6.91388,2.27995 13.22836,4.85194 16,6c1.30655,0.5412 1,2 0,2c-2,
        0 -4.0535,1.4595 -6,1c-2.17624,-0.51375 -5.93292,-5.10446 -9,-7c-6.85815,
        -4.23859 -10.08743,-6.79393 -15,-9c-4.07965,-1.83203 -6.29291,-3.70711 -7,
        -3c-1.41422,1.41423 2.75223,4.28316 5,6c6.40714,4.89374 11.01703,6.4124 16,
        6c6.06204,-0.50171 13.57114,-4.38507 19,-10c7.92529,-8.19693 7,-12 7,-14c0,
        -2 -2,-3 -2,-3c-2,0 -2.1731,-0.14726 -3,1c-2.6149,3.62799 -5.96207,13.5372 -11,
        22c-8.38965,14.09303 -17.24722,22.79562 -32,36c-9.5423,8.54077 -23.15686,
        13.57971 -29,16c-2.06586,0.85571 -3,0 -3,-3c0,-7 2.49875,-17.94672 3,-25c0.638,
        -8.97736 -0.01624,-16.20224 6,-24c3.91138,-5.06963 13.47281,-9.96919 25,-12c6.89383,
        -1.21451 19.03406,-2.68976 26,-2c10.14841,1.0049 14.64886,2.19577 17,6c1.05145,
        1.70131 -0.29291,2.29289 -1,3c-0.70709,0.70711 -1,1 -2,1l0,0l-2,0" />
</svg>

Answer 1

您的代码存在的问题是您在blur上使用input事件，并尝试将其输入的字符更改为其他字符（因此TXT.input.length）将保留1当click之外的input和blur事件发生时，转换不会被反映出来。

使用实际代码，您需要输入超过1个字符，然后在click之外输入input，转换将被重置，然后您将输入值重置为{{ 1}}字符，因此可以复制动画。

我认为最好使用1事件，因此您只要在keyup 上打字就可以看到动画效果。

<强>演示：

＆＃13;

input

＆＃13;

var TXT = document.getElementById('txtinpt');
var DASH, IDNAME = 'sig1';

TXT.addEventListener("keyup", letter);

function letter() {

    document.getElementById(IDNAME).style.transition = "none";
    document.getElementById(IDNAME).style.strokeDashoffset = DASH;

        if (TXT.value.length == 1) {
            document.getElementById('sig1').style.transition = ".8s linear";
            document.getElementById('sig1').style.strokeDashoffset = "0";
            DASH = '900';
            IDNAME = 'sig1';
    }
}

＆＃13;

#sig1 {
        stroke-dasharray: 900px;
        stroke-dashoffset: 900px;
}

＆＃13;

相同的输入输入不是触发转换

1 个答案: