css3動(dòng)畫(huà) - 如何重新運(yùn)行css3的動(dòng)畫(huà)?
問(wèn)題描述
如何通過(guò)一個(gè)事件(hover,click..)觸發(fā)css3動(dòng)畫(huà)的重新執(zhí)行?在stackoverflow找到一個(gè)相關(guān)的問(wèn)題,但是下面給出的答案也不起作用。
http://jsfiddle.net/arunpjohny/8WQcy/1/
這篇文章挺好的,介紹了重新運(yùn)行css3動(dòng)畫(huà)的不同方法
animation必須是infinite,animation-play-state才有效。
restart用這種方法挺好:
// retrieve the elementelement = document.getElementById('logo');// reset the transition by...element.addEventListener('click', function(e) { e.preventDefault; // -> removing the class element.classList.remove('run-animation'); // -> triggering reflow /* The actual magic */ // without this it wouldn’t work. Try uncommenting the line and the transition won’t be retriggered. element.offsetWidth = element.offsetWidth; // -> and re-adding the class element.classList.add('run-animation');}, false);
問(wèn)題解答
回答1:解釋?zhuān)篽ttp://www.w3school.com.cn/cssref/pr_animation-play-state.asp測(cè)試:http://www.w3school.com.cn/tiy/c.asp?f=css_animation-play-state&p=...
回答2:$it.css(’-webkit-animation-play-state’, ’running’);
你這里的屬性名寫(xiě)錯(cuò)了
回答3:我也在找怎么用事件重啟css3 animation動(dòng)畫(huà)呢,可是我發(fā)現(xiàn)這個(gè)問(wèn)題不知道是太簡(jiǎn)單還是什么,在國(guó)內(nèi)根本就找不到答案,我只能硬著頭皮去stackoverflow去搜,很巧合的是我也找到了你的那篇文章,寫(xiě)的很棒很詳細(xì),雖然英文不好,但獲益良多,我很納悶為什么看似簡(jiǎn)單的問(wèn)題卻根本百度不到,難道大家都沒(méi)遇到過(guò)嗎
回答4:這個(gè)問(wèn)題我也遇到過(guò), 所幸還好容易解決. 給要?jiǎng)赢?huà)的dom元素上加個(gè)可控制的CSS。
js. 控制 $(’.animation’).removeClass(’active’).delay(10).queue(function(next){
$(this).addClass(’active’); next(); //讓下面的隊(duì)列函數(shù)得以執(zhí)行; 猜的 });回答5:
在IPHONE9.1上還是不行。 PC瀏覽器正常。有沒(méi)有解決辦法?
回答6:為何不用animationend事件,這個(gè)也很好做兼容
el.addEventListener(’click’,function(){ this.classList.add(’active’); this.addEventListener(’animationend’,function(){this.classList.remove(’active’); });});
相關(guān)文章:
1. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””2. boot2docker無(wú)法啟動(dòng)3. docker-compose中volumes的問(wèn)題4. docker安裝后出現(xiàn)Cannot connect to the Docker daemon.5. nignx - docker內(nèi)nginx 80端口被占用6. java - SSH框架中寫(xiě)分頁(yè)時(shí)service層中不能注入分頁(yè)類(lèi)7. 關(guān)于docker下的nginx壓力測(cè)試8. dockerfile - 為什么docker容器啟動(dòng)不了?9. node.js - antdesign怎么集合react-redux對(duì)input控件進(jìn)行初始化賦值10. docker容器呢SSH為什么連不通呢?

網(wǎng)公網(wǎng)安備