>

이 샘플로 애니메이션 된 svg 라인 경로가 있습니다 :

           svg{
                position:absolute;
                width:100%;
                height:100%;
                left:0%;
                top:0%;
                display:block;
                background:transparent;
            }
            
            .path {
                stroke:black;
                stroke-dasharray: 290;
                stroke-dashoffset: 130;
                animation: dash 6s 0s forwards infinite;
                stroke-width:2px;
                stroke-linecap:round;
                stroke-linejoin:round;
            }
            
            @keyframes dash {
              from {
                stroke-dashoffset: 290;
              }
              to {
                stroke-dashoffset: 0;
              }
            }

          <svg viewbox="0 0 25 100" xmlns="http://www.w3.org/2000/svg">
                <path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent"></path>
            </svg>

잘 작동하지만 페이지가로드 될 때 트리거됩니다 .Javascript를 사용 하여이 애니메이션을 트리거하는 방법이 있습니까?

JS를 처리 할 수는 있지만 CSS 및 svg 애니메이션은 멍청합니다.

실제 CSS로 어떻게 만들 수 있는지 예를 들어 줄 수 있습니까?

감사합니다.


  • 답변 # 1

    CSS 애니메이션 대신 SMIL 애니메이션 구문을 사용할 수도 있습니다. 이것은 분명히 Microsoft 브라우저 (IE와 Edge 모두)에서 실행되지 않는 단점이 있습니다.

    var animation = document.getElementById("dash")
    function showSVG(){
         animation.beginElement();
    }
    
    
                   svg{
                        position:relative;
                        width:100%;
                        height:150px;
                        left:0%;
                        top:0%;
                        display:block;
                        background:transparent;
                    }
                    
                    .path {
                        stroke:black;
                        stroke-dasharray: 290;
                        stroke-dashoffset: 290;
                        stroke-width:2px;
                        stroke-linecap:round;
                        stroke-linejoin:round;
                    }
    
    
    <button id ="button" onclick="showSVG()">Click</button>
                   <svg id="svg" viewbox="0 0 25 100" xmlns="http://www.w3.org/2000/svg">
                        <path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent">
                            <animate id="dash" attributeName="stroke-dashoffset"
                                from="290" to="0"
                                begin="indefinite" dur="6s" fill="freeze" />
                       </path>
                    </svg>
     
    
    

    이 애니메이션은 클릭 할 때마다 한 번씩 실행됩니다. CSS animation-repeat: infinite 와 같이 고정 된 간격으로 반복하려면  처방, 사용

    <animate id="dash" attributeName="stroke-dashoffset"
        from="290" to="0"
        begin="indefinite" dur="6s" repeatCount="indefinite" />
    
    

  • 답변 # 2

    svg {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0%;
        top: 0%;
        display: block;
        background: transparent;
    }
    .path {
        stroke: black;
        stroke-dasharray: 290;
        stroke-dashoffset: 130;
        stroke-width: 2px;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dashoffset: 290;
    }
    .animated {
        animation: dash 6s 0s forwards infinite;
        stroke-dashoffset: 0;
    }
    @keyframes dash {
        from {
            stroke-dashoffset: 290;
        }
        to {
            stroke-dashoffset: 0;
        }
    }
    
    

    필요할 때마다 js로 경로에 .animated 클래스를 추가 할 수 있습니다.

  • 답변 # 3

    CSS 클래스에 애니메이션을 포함시켜야합니다 :

       .dash-animate {
            animation: dash 6s 0s forwards infinite;
        }
        @keyframes dash {
          from {
            stroke-dashoffset: 290;
          }
          to {
            stroke-dashoffset: 0;
          }
        }
    
    

    그리고 js를 사용하고 싶을 때/어디에 그 클래스를 적용하면됩니다 :

    var button = getElementById('some-button');
    button.addEventListner('click', function() {
      var elements = document.querySelectorAll('.path');
      Array.prototype.forEach.call(elements, function(el) {
        el.classList.add('dash-animate');
      });
    });
    
    

  • 답변 # 4

    var svgPattern = document.getElementById("svg")
    svgPattern.style.display = "none";
    function showSVG(){
    svgPattern.style.display = "block";
    }
    
    
                   svg{
                        position:absolute;
                        width:100%;
                        height:100%;
                        left:0%;
                        top:0%;
                        display:block;
                        background:transparent;
                    }
                    
                    .path {
                        stroke:black;
                        stroke-dasharray: 290;
                        stroke-dashoffset: 130;
                        animation: dash 6s 0s forwards infinite;
                        stroke-width:2px;
                        stroke-linecap:round;
                        stroke-linejoin:round;
                    }
                    
                    @keyframes dash {
                      from {
                        stroke-dashoffset: 290;
                      }
                      to {
                        stroke-dashoffset: 0;
                      }
                    }
    
    
    <button id ="button" onclick="showSVG()">Click</button>
                   <svg id="svg" viewbox="0 0 25 100" xmlns="http://www.w3.org/2000/svg">
                        <path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent"></path>
                    </svg>
     
    
    

관련 자료

  • 이전 c# - HttpClientExtensionPostAsJsonAsync 스레드는 안전합니까?
  • 다음 브라우저 페치가 작동하지만 AngularJS $http 서비스에 CORS 오류가 있습니다