简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 显示与隐藏动画有什么好的方案吗？
阿神
阿神 2017-06-30 09:59:55
0
5
1001

例子

就像这个动画一样的效果，p先是隐藏的，点击按钮后显示并且有动画效果，隐藏的时候同样。但我绝对我写的太复杂，有没有更简单的方案呢（不要第三方库）！

阿神
阿神

闭关修行中......

全部回复(5)
漂亮男人
漂亮男人2017-06-30 10:01:55 5 楼

试试用transition：
demo

点赞 +0
添加回复
为情所困
为情所困2017-06-30 10:01:55 4 楼

比较简单的思路是：

  1. 方块无需隐藏，只需要设置高度为0就看不见了

  2. 用transition实现动画效果

  3. 不需要使用hidden和show两个类名来控制，其实它就只有两种状态，所以可以认为无show就是隐藏了

  4. 另外无需写一个show()和hide()分开绑定，其实你这个按钮点一下是展开，再点一下隐藏，用一个toggle()切换显示状态就可以了

我在你的代码上做了点修改，如下：
https://jsfiddle.net/boxsnake...

点赞 +0
添加回复
女神的闺蜜爱上我
女神的闺蜜爱上我2017-06-30 10:01:55 3 楼

雷雷

点赞 +0
添加回复
習慣沉默
習慣沉默2017-06-30 10:01:55 2 楼

题主可以配合CSS3解决（如果不需要兼容IE的话）

点赞 +0
添加回复
小葫芦
小葫芦2017-06-30 10:01:55 1 楼

可以用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>
点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！