홈>
이 샘플로 애니메이션 된 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
- 답변 # 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>
관련 자료
- javascript/jquery의 모든 확인란을 어떻게 합산하고 부트 스트랩 레이블에 동적으로 표시 할 수 있습니까?
- html - 이 호버가 텍스트 애니메이션을 트리거하지 않는 이유는 무엇입니까?
- CSS 애니메이션을 다시 시작하지 않고 javascript로 html을 어떻게 변경할 수 있습니까?
- 누구 든지이 jQuery를 일반 Javascript로 변환하는 데 도움이됩니까?
- javascript - jQuery animation ()의 숨겨진 텍스트가 표시되지 않습니다
- html - 자바 스크립트로 애니메이션을 다시 시작하는 가장 좋은 방법 (웹킷을 사용하지 않고)
- HTML 드롭 다운 메뉴가 표시 될 때 자바 스크립트 또는 jquery를 사용하여 키보드 입력을 얻는 방법은 무엇입니까?
- javascript - 클릭 이벤트에서 URL에 대한 jQuery 트리거 호출
- JQuery를 바닐라 자바 스크립트로 변환하는 방법
- html - Javascript/jQuery로 동적 행 범위 추가
- jquery 또는 javascript 만 사용하여 이미지 변경
- javascript - 애니메이션 전에 jQuery 사전로드 이미지
- 스타일과 아약스가 다른 동일한 Javascript 파일에서 여러 jQuery DataTable 함수 사용
- javascript와 jquery로 버튼 효과를 만들려면 어떻게해야합니까?
- javascript - CSS 및 jQuery를 사용하여 자체 Vue 애니메이션 만들기
- html - onchange 액션 트리거 jquery
- css - 이상한 jquery 애니메이션 동작 - 계속 실행
- JavaScript 또는 jQuery를 사용하여 텍스트를 페이드 아웃 한 다음 다시 가져 오는 방법
- html - 다른 태그에 대한 종속성없이 JavaScript/jQuery div 태그를 표시 할 수 없습니다
- 이 jQuery 코드를 바닐라 Javascript로 어떻게 변환합니까?
관련 질문
- javascript : Safari에서 클릭 시 텍스트 선택 유지
- javascript : 다른 const와 동일한 속성을 사용하는 방법이 있습니까?
- javascript : IE5와 IE11 모두에서 호환되는 불투명도를 구현하는 방법
- javascript : 캔버스에서 버튼을 정렬하고 스타일을 지정하는 방법은 무엇입니까?
- html : Iphone 및 기타 장치에서 다른 색상으로 아이콘 표시
- javascript : 각도 클릭 이벤트가
- javascript : Mui V5 -TreeView 축소/확장 아이콘 및 TreeItem 들여쓰기 제거
- javascript : 커서에 원을 붙이고 빠르게 움직이면 원이 잘리는 것처럼 보입니다.
- javascript : 동적 글꼴 크기 조정으로 가로 텍스트 옆에 수직 텍스트 정렬
- javascript : 내 래퍼 배경 이미지가 표시되지 않습니다
CSS 애니메이션 대신 SMIL 애니메이션 구문을 사용할 수도 있습니다. 이것은 분명히 Microsoft 브라우저 (IE와 Edge 모두)에서 실행되지 않는 단점이 있습니다.
이 애니메이션은 클릭 할 때마다 한 번씩 실행됩니다. CSS
animation-repeat: infinite
와 같이 고정 된 간격으로 반복하려면 처방, 사용