등록하기에 너무 빠른 CSS 클래스 토글?

나는 나는 다음과 같은 CSS를등록하기에 너무 빠른 CSS 클래스 토글?

<path id="outlineCO" class="state included" [details omitted]/>

를 포함 그것에 SVG와 함께 HTML5 페이지를 가지고 :

.state { 
     fill: #ffff66; 
     fill-opacity: 0.7; 
     stroke: #000000; 
     stroke-width: 1; 
     stroke-opacity: 1; 
    } 
    .state.included { 
     fill: cyan; 
     fill-opacity: 1; 
     transition: fill 2s ease-in; 
    } 
    .state.included.new { 
     fill: magenta; 
     transition: none; 
    }

요점 내 미국의지도 국가가 기본 배경을 가지고있다 ; "포함 된"상태에는 또 다른 배경이 있습니다. 또한 일시적으로 클래스 이름에 "new"가 주어지면 또 다른 배경을 갖게됨을 설명합니다. 나는 크롬의 콘솔에서 다음을 실행하면, jQuery를 사용

$("#outlineCO").toggleClass("new");

예상대로 내가, 마젠타 색 청록색에서 콜로라도의 배경 색상의 변화를 볼

. 다시 동일한 코드 을 실행하면으로 콜로라도가 2 초 동안 마젠타 색에서 시안 색으로 다시 전환됩니다. 내가 실행하면

그러나, 하나

$("#outlineCO").toggleClass("new"); $("#outlineCO").toggleClass("new");

또는

$("#outlineCO").toggleClass("new").toggleClass("new");

아무 반응이 없습니다. 색상은 전체적으로 파란색으로 유지됩니다. 요소에 "new"를 추가 한 경우 은 제거 할 때까지으로 등록 된 것과 같습니다. 추가가 등록되기 전에 일정 시간이 있어야합니다. 그러면 제거가 상태를 마젠타 색으로 즉시 변경 한 후 천천히 시안 색으로 다시 전환하는 원하는 효과를 갖게됩니까? 당신이 jQuery를에 충실하고자하는 경우

출처

2017-12-15 Green Grasso Holm

브라우저는 다시 그릴 수있는 기회를 제공해야합니다. 그것은 dom의 모든 변경에 대해 그러한 기회가 주어지지 않습니다. 어떤 질문이 있는데, 왜 빨리 수업을 추가하고 제거하려고합니까? 뭔가 깜박 거리거나 깜박 거리거나하려고하는거야? – Taplar

이 논리를 수행하기 위해 클래스를 추가 및 제거하는 대신 단계가있는 전환과 관련된 클래스를 생성하십시오. 단계는 즉시 자홍색으로 변경 한 다음 점진적으로 다시 변경합니다. https://css-tricks.com/using-multi-step-animations-transitions/ – Taplar

선택한 연도의 여러 주에 대한 상태를 보여주는 대화식지도입니다. 연도가 선택되면 이전 연도에 이미 "포함 된"상태가 시안 색으로 표시되고 해당 연도에 처음 포함 된 상태는 마젠타에서 시작하여 시안 색으로 전환됩니다. (이것은 기존 Flash 버전의 작동 방식이며 HTML5로 다시 작성합니다.) 2015가 선택되고 Colorado가 2009 년에 처음 "포함"되었다고 가정하면 시안 색이 나타납니다. 이제 사용자가 2009를 선택하면 Colorado는 마젠타 색으로 직접 이동 한 다음 시안 색으로 다시 전환해야합니다. 그게 내가하는 효과 야. –

, 당신은 jQuery를 UI 라이브러리에서 toggleClass 방법을 사용할 수 있습니다 또한 시간 매개 변수 (MS)를 받아들이는, (docs 참조).

는 (기간 1000 명 MS로 설정) 아래의 코드 조각을 참조하십시오

$('#square').toggleClass('new', 1000).toggleClass('new', 1000);

#square { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: #ccc; 
 
} 
 

 
#square.new { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script 
 
    src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" 
 
    integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" 
 
    crossorigin="anonymous"></script> 
 
<div id="square"></div>

출처

2017-12-15 16:26:00

등록하기에 너무 빠른 CSS 클래스 토글?

답변

관련 문제