Question

在我的动画中使用了CSS，SVG和JS。

我创建一些路径。用户可以选择自己想看的路径。单击按钮后，所选路径开始绘制。我的动画可以在Mozzilla和Edge中工作，但不能在Chrome中工作。我的代码如下：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <style>
    .opcjaApath{
      -webkit-animation: dash1 10s linear forwards;
      -webkit-animation-iteration-count: 1;
      -moz-stroke-dasharray: 2684;
      -moz-stroke-dashoffset: 2684;
      -moz-animation: dash1 10s linear forwards;
      -moz-animation-iteration-count: 1;
      -o-stroke-dasharray: 2684;
      -o-stroke-dashoffset: 2684;
      -o-animation: dash1 10s linear forwards;
      -o-animation-iteration-count: 1;
      animation: dash1 10s linear forwards;
      animation-iteration-count: 1;
      stroke-dasharray: 2684;
      stroke-dashoffset: 2684;
    }

    .opcjaBpath{
      -webkit-animation: dash1 10s linear forwards;
      -webkit-animation-iteration-count: 1;
      -moz-animation: dash1 10s linear forwards;
      -moz-animation-iteration-count: 1;
      -o-animation: dash1 10s linear forwards;
      -o-animation-iteration-count: 1;
      animation: dash1 10s linear forwards;
      animation-iteration-count: 1;
      stroke-dasharray: 2684;
      stroke-dashoffset: 2684;
    }

    @-webkit-keyframes dash1 {
      0% {
        -webkit-stroke-dashoffset: 2684;
      }
      100% {
        -webkit-stroke-dashoffset: 0;
      }
    }

    @-moz-keyframes dash1 {
      0% {
        -moz-stroke-dashoffset: 2684;
      }
      100% {
        -moz-stroke-dashoffset: 0;
      }
    }
    @-o-keyframes dash1 {
      0% {
        -o-stroke-dashoffset: 2684;
      }
      100% {
        -o-stroke-dashoffset: 0;
      }
    }

    @keyframes dash1 {
      0% {
        stroke-dashoffset: 2684;
      }
      100% {
        stroke-dashoffset: 0;
      }
    }

    </style>

<html>
      <button id="A"> Option A </button> 
      <button id="B"> Option B </button> 

      <svg width="400" height="300">

        <g id="optionA">
          <path class="opcjaApath" d="M50,30 250,30 250,54 50,54 50,78 250,78 250,102 50,102 50,126 250,126 250,150 50,150 50,174 250,174 250,198 50,198 50,222 250,222 250,246 50,246 50,270 250,270" stroke="red"
                stroke-width="3" fill="none"/>
        </g>
        <g id="optionB">

          <path class="opcjaBpath" d="M150,150 150,126 170,126 170,174 130,174 130,102 190,102 190,198 110,198 110,78 210,78 210,222 90,222 90,54 230,54 230,246 70,246 70,30 250,30 250,270 50,270 50,30" stroke="red"
                stroke-width="3" fill="none"/>
        </g>
      </svg>

    </html>

    <script>
    $("#optionA").hide();
    $("#optionB").hide();


    $('#A').click(function(){
      hidebutton() 
      $("#optionA").show();
      $("#optionB").hide();
      setTimeout(showbutton, 10000);
    });

    $('#B').click(function(){
      hidebutton() 
      $("#optionB").show();
      $("#optionA").hide();
      setTimeout(showbutton, 10000);
    });

    function showbutton() {
      $("#A").show();
      $("#B").show();
    }

    function hidebutton() {
      $("#A").hide();
      $("#B").hide();
    }
    <script>

我不知道，为什么它在Chrome中不起作用...也许您知道我应该怎么做？

Answer 1

这种行为上的差异似乎是因为Chrome浏览器会在页面加载后立即开始播放动画。 Firefox和Edge仅在SVG可见后才触发动画。

我不知道哪种行为是正确的。

但是，解决此问题的方法是在您希望它们开始播放之前，不要将这些类添加到<path>元素中。

从路径中删除class="obcjaApath"属性

更改您的点击处理程序，以使它们在显示SVG时重新添加类：

$('#A').click(function(){
  hidebutton() 
  $("#optionA").show();
  $("#optionA").addClass("opcjaApath");
  $("#optionB").hide();
  $("#optionB").removeClass("opcjaBpath");
  setTimeout(showbutton, 10000);
});

完整演示：

$("#optionA").hide();
$("#optionB").hide();


$('#A').click(function(){
  hidebutton() 
  $("#optionA").show();
  $("#optionA").addClass("opcjaApath");
  $("#optionB").hide();
  $("#optionB").removeClass("opcjaBpath");
  setTimeout(showbutton, 10000);
});

$('#B').click(function(){
  hidebutton() 
  $("#optionB").show();
  $("#optionB").addClass("opcjaBpath");
  $("#optionA").hide();
  $("#optionA").removeClass("opcjaApath");
  setTimeout(showbutton, 10000);
});

function showbutton() {
  $("#A").show();
  $("#B").show();
}

function hidebutton() {
  $("#A").hide();
  $("#B").hide();
}

.opcjaApath{
      -webkit-animation: dash1 10s linear forwards;
      -webkit-animation-iteration-count: 1;
      -moz-stroke-dasharray: 2684;
      -moz-stroke-dashoffset: 2684;
      -moz-animation: dash1 10s linear forwards;
      -moz-animation-iteration-count: 1;
      -o-stroke-dasharray: 2684;
      -o-stroke-dashoffset: 2684;
      -o-animation: dash1 10s linear forwards;
      -o-animation-iteration-count: 1;
      animation: dash1 10s linear forwards;
      animation-iteration-count: 1;
      stroke-dasharray: 2684;
      stroke-dashoffset: 2684;
    }

    .opcjaBpath{
      -webkit-animation: dash1 10s linear forwards;
      -webkit-animation-iteration-count: 1;
      -moz-animation: dash1 10s linear forwards;
      -moz-animation-iteration-count: 1;
      -o-animation: dash1 10s linear forwards;
      -o-animation-iteration-count: 1;
      animation: dash1 10s linear forwards;
      animation-iteration-count: 1;
      stroke-dasharray: 2684;
      stroke-dashoffset: 2684;
    }

    @-webkit-keyframes dash1 {
      0% {
        -webkit-stroke-dashoffset: 2684;
      }
      100% {
        -webkit-stroke-dashoffset: 0;
      }
    }

    @-moz-keyframes dash1 {
      0% {
        -moz-stroke-dashoffset: 2684;
      }
      100% {
        -moz-stroke-dashoffset: 0;
      }
    }
    @-o-keyframes dash1 {
      0% {
        -o-stroke-dashoffset: 2684;
      }
      100% {
        -o-stroke-dashoffset: 0;
      }
    }

    @keyframes dash1 {
      0% {
        stroke-dashoffset: 2684;
      }
      100% {
        stroke-dashoffset: 0;
      }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="A"> Option A </button> 
<button id="B"> Option B </button> 

<svg width="400" height="300">

  <g id="optionA">
    <path d="M50,30 250,30 250,54 50,54 50,78 250,78 250,102 50,102 50,126 250,126 250,150 50,150 50,174 250,174 250,198 50,198 50,222 250,222 250,246 50,246 50,270 250,270" stroke="red"
          stroke-width="3" fill="none"/>
  </g>
  <g id="optionB">

    <path d="M150,150 150,126 170,126 170,174 130,174 130,102 190,102 190,198 110,198 110,78 210,78 210,222 90,222 90,54 230,54 230,246 70,246 70,30 250,30 250,270 50,270 50,30" stroke="red"
          stroke-width="3" fill="none"/>
  </g>
</svg>

Answer 2

您的代码格式错误。检查下面。

<html lang="en">

<head>
    <style>
        .opcjaApath {
            -webkit-animation: dash1 10s linear forwards;
            -webkit-animation-iteration-count: 1;
            -moz-stroke-dasharray: 2684;
            -moz-stroke-dashoffset: 2684;
            -moz-animation: dash1 10s linear forwards;
            -moz-animation-iteration-count: 1;
            -o-stroke-dasharray: 2684;
            -o-stroke-dashoffset: 2684;
            -o-animation: dash1 10s linear forwards;
            -o-animation-iteration-count: 1;
            animation: dash1 10s linear forwards;
            animation-iteration-count: 1;
            stroke-dasharray: 2684;
            stroke-dashoffset: 2684;
        }

        .opcjaBpath {
            -webkit-animation: dash1 10s linear forwards;
            -webkit-animation-iteration-count: 1;
            -moz-animation: dash1 10s linear forwards;
            -moz-animation-iteration-count: 1;
            -o-animation: dash1 10s linear forwards;
            -o-animation-iteration-count: 1;
            animation: dash1 10s linear forwards;
            animation-iteration-count: 1;
            stroke-dasharray: 2684;
            stroke-dashoffset: 2684;
        }

        @-webkit-keyframes dash1 {
            0% {
                -webkit-stroke-dashoffset: 2684;
            }

            100% {
                -webkit-stroke-dashoffset: 0;
            }
        }

        @-moz-keyframes dash1 {
            0% {
                -moz-stroke-dashoffset: 2684;
            }

            100% {
                -moz-stroke-dashoffset: 0;
            }
        }

        @-o-keyframes dash1 {
            0% {
                -o-stroke-dashoffset: 2684;
            }

            100% {
                -o-stroke-dashoffset: 0;
            }
        }

        @keyframes dash1 {
            0% {
                stroke-dashoffset: 2684;
            }

            100% {
                stroke-dashoffset: 0;
            }
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <center>
        <button id="A"> Option A </button>
        <button id="B"> Option B </button>

        <svg width="400" height="300">

            <g id="optionA">
                <path class="opcjaApath"
                    d="M50,30 250,30 250,54 50,54 50,78 250,78 250,102 50,102 50,126 250,126 250,150 50,150 50,174 250,174 250,198 50,198 50,222 250,222 250,246 50,246 50,270 250,270"
                    stroke="red" stroke-width="3" fill="none" />
            </g>
            <g id="optionB">

                <path class="opcjaBpath"
                    d="M150,150 150,126 170,126 170,174 130,174 130,102 190,102 190,198 110,198 110,78 210,78 210,222 90,222 90,54 230,54 230,246 70,246 70,30 250,30 250,270 50,270 50,30"
                    stroke="red" stroke-width="3" fill="none" />
            </g>
        </svg>

    </center>


    <script>
        $("#optionA").hide();
        $("#optionB").hide();


        $('#A').click(function () {
            hidebutton()
            $("#optionA").show();
            $("#optionB").hide();
            setTimeout(showbutton, 10000);
        });

        $('#B').click(function () {
            hidebutton()
            $("#optionB").show();
            $("#optionA").hide();
            setTimeout(showbutton, 10000);
        });

        function showbutton() {
            $("#A").show();
            $("#B").show();
        }

        function hidebutton() {
            $("#A").hide();
            $("#B").hide();
        }
    </script>
</body>

</html>

SVG虚线动画在Chrome中不起作用

2 个答案: