javascript - 顯示與隱藏動畫有什么好的方案嗎？
問題描述
例子
就像這個動畫一樣的效果，p先是隱藏的，點擊按鈕后顯示并且有動畫效果，隱藏的時候同樣。但我絕對我寫的太復雜，有沒有更簡單的方案呢（不要第三方庫）！
問題解答
回答1：試試用transition：demo
回答2：比較簡單的思路是：
方塊無需隱藏，只需要設置高度為0就看不見了
用transition實現(xiàn)動畫效果
不需要使用hidden和show兩個類名來控制，其實它就只有兩種狀態(tài)，所以可以認為無show就是隱藏了
另外無需寫一個show()和hide()分開綁定，其實你這個按鈕點一下是展開，再點一下隱藏，用一個toggle()切換顯示狀態(tài)就可以了
我在你的代碼上做了點修改，如下：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實現(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>
相關文章：
1. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣？這個是怎么回事？？？？2. 在應用配置文件 app.php 中找不到’route_check_cache’配置項3. html按鍵開關如何提交我想需要的值到數(shù)據(jù)庫4. css - width設置為100%之后列表無法居中5. ios - vue－cli開發(fā)項目webstrom會在stylus樣式報錯，飆紅，請大神幫忙6. css3 - 怎么感覺用 rem 開發(fā)的不多啊7. python - 在pyqt中做微信的機器人,要在表格中顯示微信好友的名字,卻顯示不出來,怎么解決?8. html5 - 用Egret寫的小游戲，怎么分享到微信呢？9. javascript - 一個頁面有四個圖片，翻頁的時候想固定住某個圖片然后翻頁，如何實現(xiàn)呢?10. objective-c - 自定義導航條為類似美團的搜索欄樣式
網(wǎng)公網(wǎng)安備