javascript - Is there any good solution for showing and hiding animations?

Question

Example: It has the same effect as this animation. The div is hidden first. After clicking the button, it is displayed and has animation effects. It is the same when it is hidden. But I definitely wrote it too complicatedly. Is there a simpler solution (without third-party libraries)?

漂亮男人 · Answer

Try using transition:
demo

为情所困 · Answer

The simpler idea is:

The block does not need to be hidden, just set the height to 0 and it will be invisible
Use transition to achieve animation effects
There is no need to use the two class names hidden and show to control it. In fact, it only has two states, so it can be considered that without show it is hidden
In addition, there is no need to write a show() and hide() to bind them separately. In fact, you can click this button to expand it, click it again to hide it, and use a toggle() to switch the display state

I made some modifications to your code, as follows:
https://jsfiddle.net/boxsnake...

女神的闺蜜爱上我 · Answer

<pre class='brush:php;toolbar:false;'><code><!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></code></pre>

習慣沉默 · Answer

The question can be solved with CSS3 (if it does not need to be compatible with IE)

高洛峰 · Answer

Can it be implemented with jquery?

//头部引入jquery,toggle()

    bugbugbug