클래스 제거시 CSS 전환

설정 페이지 역할을하는 양식이 있습니다. 양식 요소가 수정되면으로 표시되고 unsaved테두리 색상이 다릅니다. 양식이 저장되면 다른 테두리 색상을 사용하여 저장된 것으로 표시됩니다.

내가 원하는 것은 양식이 저장되면 테두리가 점차 사라질 것이라는 것입니다.

주문이 진행됩니다.

<input type='text' class='unsaved' /> Not saved yet, border is yellow
<input type='text' class='saved' />   Saved, so the border is green
<input type='text' class='' />        Fade out if coming from class saved

클래스 saved가 제거 될 때 CSS3 전환을 실행할 수 있다면 페이드 아웃 될 수 있고 모든 것이 엉망이 될 것입니다. 현재는 수동으로 애니메이션을 적용해야하지만 (물론 플러그인을 사용하여) 고르지 않게 보이기 때문에 코드를 CSS3로 이동하여 더 매끄럽게 만들고 싶습니다.

Chrome 및 Firefox 4 이상에서 작동하는 데만 필요하지만 다른 사람들은 좋을 것입니다.

CSS :

관련 CSS는 다음과 같습니다.

.unsaved {
    border: 3px solid #FFA500;
    padding: 0;
}
.saved {
    border: 3px solid #0F0;
    padding: 0;
}

다음 전환 (또는 이와 유사한 것)에서 작업하고 싶습니다.

border-color: rgba(0,0,0,0);
-webkit-transition: border-color .25s ease-in;  
-moz-transition: border-color .25s ease-in;  
-o-transition: border-color .25s ease-in;  
transition: border-color .25s ease-in;

노트 :

개인적으로 저는 이러한 사용자 상호 작용 방식에 동의하지 않지만 소프트웨어 리더가 원하는 방식입니다. 현재 작동 방식을 변경하도록 제안하지 마십시오. 감사!

CSS 전환은 CSS를 사용하여 객체에 대해 두 가지 상태를 정의하여 작동합니다. 귀하의 경우에는 객체에 클래스 "saved"가있을 때 어떻게 보이는지 정의하고 클래스가 없을 때 어떻게 보이는지 정의합니다 "saved"(일반적인 모양). 클래스를 제거하면 클래스 "saved"가없는 객체에 적용되는 전환 설정에 따라 다른 상태로 전환됩니다 "saved".

CSS 전환 설정이 ( "saved"클래스 없이 ) 객체에 적용되면 두 전환 모두에 적용됩니다.

제공 한 HTML에 사용중인 모든 관련 CSS를 포함하면보다 구체적으로 도움을 드릴 수 있습니다.

HTML을 살펴보면 전환 CSS 설정이 적용 .saved되므로 제거하면 CSS 설정을 지정하는 컨트롤이 없다는 것 같습니다. ".fade"객체에 항상 남겨 두는 다른 클래스를 추가 하고 해당 클래스에 CSS 전환 설정을 지정하여 항상 적용되도록 할 수 있습니다.

@ jfriend00의 대답은 애니메이션을 추가하는 것이 아니라 클래스를 제거 하는 기술을 이해하는 데 도움이됩니다 .

"기본"클래스에는 transition속성 (예 :)이 있어야 합니다 transition: 2s linear all;. 이렇게하면이 요소에서 다른 클래스가 추가되거나 제거 될 때 애니메이션이 활성화됩니다. 그러나 다른 클래스가 추가 될 때 애니메이션을 비활성화하려면 (그리고 클래스 제거 만 애니메이션화) transition: none;두 번째 클래스 에 추가 해야합니다.

예

CSS :

.issue {
  background-color: lightblue;
  transition: 2s linear all;
}

.recently-updated {
  background-color: yellow;
  transition: none;
}

HTML :

<div class="issue" onclick="addClass()">click me</div>

JS (클래스 추가에만 필요) :

var timeout = null;

function addClass() {
  $('.issue').addClass('recently-updated');
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
  }
  timeout = setTimeout(function () {
    $('.issue').removeClass('recently-updated');
  }, 1000);
}

이 예의 plunker .

이 코드를 사용하면 recently-updated클래스 제거 만 애니메이션됩니다.

기본적으로 다음과 같이 CSS를 설정하십시오.

element {
  border: 1px solid #fff;      
  transition: border .5s linear;
}

element.saved {
  border: 1px solid transparent;
}

제 경우에는 불투명도 전환에 문제가 있었기 때문에이 문제를 해결했습니다.

#dropdown {
    transition:.6s opacity;
}
#dropdown.ns {
    opacity:0;
    transition:.6s all;
}
#dropdown.fade {
    opacity:1;
}

마우스 입력

$('#dropdown').removeClass('ns').addClass('fade');

마우스 떠나기

$('#dropdown').addClass('ns').removeClass('fade');