javascript - 顯示與隱藏動(dòng)畫有什么好的方案嗎？
問題描述
例子
就像這個(gè)動(dòng)畫一樣的效果，p先是隱藏的，點(diǎn)擊按鈕后顯示并且有動(dòng)畫效果，隱藏的時(shí)候同樣。但我絕對(duì)我寫的太復(fù)雜，有沒有更簡單的方案呢（不要第三方庫）！
問題解答
回答1：試試用transition：demo
回答2：比較簡單的思路是：
方塊無需隱藏，只需要設(shè)置高度為0就看不見了
用transition實(shí)現(xiàn)動(dòng)畫效果
不需要使用hidden和show兩個(gè)類名來控制，其實(shí)它就只有兩種狀態(tài)，所以可以認(rèn)為無show就是隱藏了
另外無需寫一個(gè)show()和hide()分開綁定，其實(shí)你這個(gè)按鈕點(diǎn)一下是展開，再點(diǎn)一下隱藏，用一個(gè)toggle()切換顯示狀態(tài)就可以了
我在你的代碼上做了點(diǎn)修改，如下：https://jsfiddle.net/boxsnake...
回答3：<!DOCTYPE html><html> <head><meta charset='UTF-8'><title></title> </head> <style type='text/css'>.box{ background: red; height: 200px; width: 200px; transition: height 0.8s;} </style> <body><button onclick='changeHeight()'>click me</button><p style='height: 0;'></p> </body> <script src='https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js' type='text/javascript' charset='utf-8'></script> <script type='text/javascript'>function changeHeight(){ var box=$(’.box’) if($(’.box’).height()!=0){$(’.box’).height(0) }else{$(’.box’).height(200) } } </script></html>回答4：
題主可以配合CSS3解決（如果不需要兼容IE的話）
回答5：可以用jquery實(shí)現(xiàn)嗎？
//頭部引入jquery,toggle()<body> <p>bugbugbug</p> <button>Toggle</button> <script type='text/javascript'> $(document).ready(function() {$('button').click(function() { $('p').toggle(1000);}); }); </script></body>
相關(guān)文章：
1. javascript - react如何獲取offsetX？2. python - sqlalchemy更新數(shù)據(jù)報(bào)錯(cuò)3. html5 - 前端面試碰到了一個(gè)緩存數(shù)據(jù)的問題，來論壇上請(qǐng)教一下4. MySQL中無法修改字段名的疑問5. macos - 無法source activate python276. PHPExcel表格導(dǎo)入數(shù)據(jù)庫怎么導(dǎo)入7. css - 移動(dòng)端 盒子內(nèi)加overflow-y:scroll后 字體會(huì)變大8. 運(yùn)行python程序時(shí)出現(xiàn)“應(yīng)用程序發(fā)生異常”的內(nèi)存錯(cuò)誤？9. html - 網(wǎng)頁的a標(biāo)簽到底要不要寫上域名？10. 我在導(dǎo)入模板資源時(shí)遇到無法顯示的問題，請(qǐng)老師解答下
網(wǎng)公網(wǎng)安備