javascript - 显示与隐藏动画有什么好的方案吗？
问题描述
例子
就像这个动画一样的效果，p先是隐藏的，点击按钮后显示并且有动画效果，隐藏的时候同样。但我绝对我写的太复杂，有没有更简单的方案呢（不要第三方库）！
问题解答
回答1：试试用transition：demo
回答2：比较简单的思路是：
方块无需隐藏，只需要设置高度为0就看不见了
用transition实现动画效果
不需要使用hidden和show两个类名来控制，其实它就只有两种状态，所以可以认为无show就是隐藏了
另外无需写一个show()和hide()分开绑定，其实你这个按钮点一下是展开，再点一下隐藏，用一个toggle()切换显示状态就可以了
我在你的代码上做了点修改，如下：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实现吗？
//头部引入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. java - mybatis怎么实现在数据库中有就修改,没有就添加2. MYSQL新建用户设置可以远程访问的问题3. $fields = $values = [];这条代码一直定义不了，一直报错，老师的源码也是被报错的,执行不了,请问该怎么解决这个问题4. python - 求一个在def中可以实现调用本def满足特定条件continue效果的方法（标题说不太清楚，请见题内描述）5. angular.js - angularjs的自定义过滤器如何给文字加颜色？6. javascript - 用表单提交两个时间段请求后台返回对应数据时出现的一些问题！7. node.js - nodejs和前端JavaScript 字符串处理结果不一样是什么原因？8. mysql - 我的myeclipse一直连显示数据库连接失败，不知道为什么9. mysql - SQL操作时间的函数?10. mysql 为何insert的时候会有lock wait timeout 异常
![$fields = $values = [];这条代码一直定义不了，一直报错，老师的源码也是被报错的,执行不了,请问该怎么解决这个问题](http://www.haobala.com/attached/image/news/202205/093622cb60.png)
网公网安备