CSS3.0中的transition屬性是非常常用的樣式屬性之一，它可以讓元素在一定的時間內(nèi)完成過渡效果，使得網(wǎng)頁更加生動、具有交互性。然而，我們在使用transition屬性的時候，有時候也需要中止過渡效果，接下來就讓我們來探討一下如何中止過渡效果。

/* 以下是transition屬性的設置： */
div{
transition: all 2s;
}
/* 我們可以給元素添加js事件來實現(xiàn)transition的中止： */
var div = document.getElementsByTagName('div')[0];
div.addEventListener('mouseover', function(){
this.style.transition = 'none';
}, false);

我們可以利用JS來給元素添加鼠標事件，當鼠標滑入的時候，我們就把元素的transition屬性設為none，這時候過渡效果就不會再執(zhí)行。

/* 我們還可以利用transitionend事件來中止過渡效果： */
div.addEventListener('transitionend', function(){
this.style.transition = 'none';
}, false);
/* 或者我們可以單獨綁定一個事件處理函數(shù)： */
div.addEventListener('mouseover', function(){
this.removeEventListener('transitionend', arguments.callee, false);
this.style.transition = 'none';
}, false);

除了綁定鼠標事件外，我們也可以利用CSS3中的transitionend事件來中止過渡效果。當元素完成過渡效果后，它會觸發(fā)transitionend事件，我們只需要在事件處理函數(shù)中將元素的transition屬性賦值為none即可。

我們還可以使用removeEventListener方法，主要是防止事件的重復綁定和綁定不正確的時候，可以將該事件的處理函數(shù)去掉。

以上就是CSS3.0中終止transition的一些方法，根據(jù)需要選擇適合的方式進行中止，希望對你有所幫助。