추가 된 요소에 효과 추가

Question

This is the fiddle. 목록 그룹이 있습니다. "추가"버튼을 클릭하면 "생성"버튼이있는 팝업이 나타납니다. "만들기"버튼을 클릭하면 샘플 목록 항목이 목록 그룹의 "추가"버튼 앞에 추가됩니다.

이제 생성 된 목록 항목이 추가 된 위치에서 사용자가 이해할 수 있도록 몇 가지 효과를 원합니다. 그래서, 나는 추가 된 요소에 다른 색을 추가하고 fadeOut()과 같은 다른 색을 부드럽게 사라지 려합니다. 그래서 append 할 때 .temp라는 새로운 클래스를 추가하고 스타일을 지정했습니다. 그래서, "만든 목록"을 추가 한 후에, 그것은 다르게 보입니다. 이제 .temp 클래스를 즉시 (2/3 초 내에) 부드럽게 제거 할 수 있습니까? 두 번째의 2/3 후 제거

Answer 1

은 간단합니다 : http://jsfiddle.net/TrueBlueAussie/hfof316a/3/

$('body').on('click', '.create-list', function() { 
    var $element = $('<a href="#" class="list-group-item temp" data-toggle="modal" data-target="#listPopup"> Created List <span class="glyphicon glyphicon-remove-circle pull-right remove"></span> </a>'); 
    $('.add').before($element); 
    setTimeout(function(){ 
     $element.removeClass("temp"); 
    }, 666); 
}); 

또한 (안 임시로) 항목에 전환을 설정해야

:

http://jsfiddle.net/TrueBlueAussie/hfof316a/6/

Answer 2

얼마 후 temp 클래스를 삭제하십시오.

setTimeout(function() { 
    $(".temp:first").removeClass("temp"); 
}, 1000); 

그리고 temp 클래스가 아닌 list-group-item 클래스로의 전환을 추가하십시오 (잠시 후 제거되기 때문에). 에서

.list-group-item { 
    transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
} 

See updated fiddle here.