javascript - 显示与隐藏动画有什么好的方案吗？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 显示与隐藏动画有什么好的方案吗？

阿神 2017-06-30 09:59:55

[JavaScript讨论组]

1667

例子

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

阿神

闭关修行中......

全部回复(5)

漂亮男人2017-06-30 10:01:55 5楼

试试用transition：
demo

赞 +0

添加回复

为情所困2017-06-30 10:01:55 4楼

比较简单的思路是：

方块无需隐藏，只需要设置高度为0就看不见了
用transition实现动画效果
不需要使用hidden和show两个类名来控制，其实它就只有两种状态，所以可以认为无show就是隐藏了
另外无需写一个show()和hide()分开绑定，其实你这个按钮点一下是展开，再点一下隐藏，用一个toggle()切换显示状态就可以了

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

赞 +0

添加回复

女神的闺蜜爱上我2017-06-30 10:01:55 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 class="box" 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>

赞 +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

添加回复

专题推荐

更多>

热门话题

热门教程

更多>