cari

Rumah  >  Soal Jawab  >  teks badan

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

Contoh

Ia mempunyai kesan yang sama seperti animasi 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)?

阿神阿神2706 hari yang lalu1027

membalas semua(5)saya akan balas

  • 漂亮男人

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

    Cuba gunakan peralihan:
    demo

    balas
    0
  • 为情所困

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

    Idea yang lebih mudah ialah:

    1. Blok tidak perlu disembunyikan, cuma tetapkan ketinggian kepada 0 dan ia tidak akan kelihatan

    2. Gunakan transition untuk mencapai kesan animasi

    3. Tidak perlu gunahidden和show两个类名来控制，其实它就只有两种状态，所以可以认为无showIa hanya tersembunyi

    4. 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...

    balas
    0
  • 女神的闺蜜爱上我

    女神的闺蜜爱上我2017-06-30 10:01:55

    <!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>

    balas
    0
  • 習慣沉默

    習慣沉默2017-06-30 10:01:55

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

    balas
    0
  • 高洛峰

    高洛峰2017-06-30 10:01:55

    Bolehkah ia dilaksanakan dengan 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>

    balas
    0
  • Batalbalas