Анимация пунктирной линии SVG не работает в Chrome - PullRequest
Новая
       15

Анимация пунктирной линии SVG не работает в Chrome

0 голосов
/ 08 июля 2019

В моей анимации используется 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 ... Может быть, вы знаете, что я должен делать?

Ответы [ 2 ]

0 голосов
/ 09 июля 2019

Такое различие в поведении объясняется тем, что Chrome запускает анимацию сразу после загрузки страницы. В то время как Firefox и Edge запускают анимацию только после того, как SVG становятся видимыми.

Я не знаю, какое поведение правильное.

Но решение этой проблемы состоит в том, чтобы не добавлять эти классы к элементам <path>, пока вы не захотите, чтобы они начали играть.

  1. Удалить атрибуты class="obcjaApath" из путей

  2. Измените ваши обработчики кликов, чтобы они добавляли классы обратно, когда 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>
0 голосов
/ 08 июля 2019

Ваш код неверный.проверьте ниже.

<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>
...