javascript - 顯示與隱藏動畫有什麼好的方案嗎?
阿神
阿神 2017-06-30 09:59:55
0
5
1062

例子

就像這個動畫一樣的效果,p先是隱藏的,點擊按鈕後顯示並且有動畫效果,隱藏的時候同樣。但我絕對我寫的太複雜,有沒有更簡單的方案呢(不要第三方函式庫)!

阿神
阿神

闭关修行中......

全部回覆(5)
漂亮男人

試試用transition:
demo

为情所困

比較簡單的思路是:

  1. 方塊無需隱藏,只需要設定高度為0就看不見了

  2. transition實現動畫效果

  3. 不需要使用hiddenshow兩個類別名稱來控制,其實它就只有兩種狀態,所以可以認為無show就是隱藏了

  4. 另外無需寫一個show()hide()分開綁定,其實你這個按鈕點一下是展開,再點一下隱藏,用一個toggle()切換顯示狀態就可以了


🎜我在你的程式碼上做了點修改,如下:🎜https://jsfiddle.net/boxsnake...🎜
習慣沉默

題主可以配合CSS3解決(如果不需要相容IE的話)

小葫芦

可以用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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板