javascript - Adakah terdapat penyelesaian yang baik untuk menunjukkan dan menyembunyikan animasi?

Question

Contoh: Ia mempunyai kesan yang sama seperti div ini disembunyikan dahulu. Selepas mengklik butang, ia dipaparkan dan mempunyai kesan animasi. Tetapi saya pasti menulisnya terlalu rumit Adakah terdapat penyelesaian yang lebih mudah (tidak memerlukan perpustakaan pihak ketiga)?

漂亮男人 · Answer

Cuba gunakan peralihan:
demo

为情所困 · Answer

Idea yang lebih mudah ialah:

Blok tidak perlu disembunyikan, cuma tetapkan ketinggian kepada 0 dan ia tidak akan kelihatan
Gunakan transition untuk mencapai kesan animasi
Tidak perlu gunahidden和show两个类名来控制，其实它就只有两种状态，所以可以认为无showIa hanya tersembunyi
Selain itu, tidak perlu menulis show()和hide()分开绑定，其实你这个按钮点一下是展开，再点一下隐藏，用一个toggle()hanya tukar status paparan

Saya membuat beberapa pengubahsuaian pada kod anda, seperti berikut:
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

Soalan boleh diselesaikan dengan CSS3 (jika ia tidak perlu serasi dengan IE)

高洛峰 · Answer

Bolehkah ia dilaksanakan dengan jquery?

//头部引入jquery,toggle()

    bugbugbug