無法通過使用jQuery切換類來觸發轉換

Question

我想做一個簡單的轉換，但要用jQuery來做這件事。 我創建在JS進行改造在事件監聽像這樣的元素：

const searchHint = ` 
    <h3 id="search_hint" class="invizible"> 
    Enter a search term to continue! 
    </h3> 
` 
$('#search_label').append(searchHint) 
$('#search_hint').removeClass('invizible').addClass('make_vizible') 

在我的樣式表我已經得到了類「invizible」和「make_vizible」這些風格：

#search_hint.invizible { 
    color: white; 
    transition: color 1s ease; 
} 

#search_hint.make_vizible { 
    color: #404040; 
} 

據我所知，這應該會導致搜索提示元素緩慢淡入。我使用可調用類創建它，其中存在轉換屬性，並且還要爲要轉換的屬性創建起始值。然後我將類切換到具有不同顏色值的類。

會發生什麼，該元素是剛剛顯示，而不是動畫。

任何想法？

Answer 1

這裏有兩個問題：

1. 的transition屬性設置在invizible類。所以一旦你刪除它，該屬性是不適用的。要解決此問題，請將transition關聯到元素標識。

2. removeClass和addClass可能會在渲染時應用於附加#search_hint的同一幀。爲了減輕這一點，你可以等待框架渲染，然後添加/刪除類。我用setTimeout做了這個，超時值爲零。

const searchHint = ` 
 
    <h3 id="search_hint" class="invizible"> 
 
    Enter a search term to continue! 
 
    </h3> 
 
`; 
 
$('#search_label').append(searchHint); 
 

 
setTimeout(function() { 
 
    $('#search_hint').removeClass('invizible').addClass('make_vizible'); 
 
},0);

#search_hint { 
 
    color: white; 
 
    transition: color 1s ease; 
 
} 
 

 

 
#search_hint.invizible { 
 
    color: white; 
 
} 
 

 
#search_hint.make_vizible { 
 
    color: #404040; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="search_label"> 
 

 
</div>