简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Existe-t-il une bonne solution pour afficher et masquer des animations?
阿神
阿神 2017-06-30 09:59:55
0
5
961

Exemple

Cela a le même effet que cette animation. p est masqué en premier. Après avoir cliqué sur le bouton, il s'affiche et a un effet d'animation. C'est la même chose lorsqu'il est masqué. Mais je l'ai définitivement écrit trop compliqué. Existe-t-il une solution plus simple (pas besoin de bibliothèques tierces) ?

阿神
阿神

闭关修行中......

répondre à tous(5)
漂亮男人
漂亮男人2017-06-30 10:01:55 5 plancher

Essayez d'utiliser la transition :
démo

Comme +0
Ajouter une réponse
为情所困
为情所困2017-06-30 10:01:55 4 plancher

L'idée la plus simple est :

  1. Le bloc n'a pas besoin d'être masqué, il suffit de régler la hauteur sur 0 et il sera invisible

  2. Utilisez transition pour obtenir des effets d'animation

  3. Pas besoin de l'utiliserhidden和show两个类名来控制，其实它就只有两种状态，所以可以认为无showC'est juste caché

  4. De plus, il n'est pas nécessaire d'écrire un show()和hide()分开绑定，其实你这个按钮点一下是展开，再点一下隐藏，用一个toggle()il suffit de changer l'état d'affichage

J'ai apporté quelques modifications à votre code, comme suit :
https://jsfiddle.net/boxsnake...

Comme +0
Ajouter une réponse
女神的闺蜜爱上我
女神的闺蜜爱上我2017-06-30 10:01:55 3 plancher 
<!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>
Comme +0
Ajouter une réponse
習慣沉默
習慣沉默2017-06-30 10:01:55 2 plancher

La question peut être résolue avec CSS3 (s'il n'est pas nécessaire qu'elle soit compatible avec IE)

Comme +0
Ajouter une réponse
小葫芦
小葫芦2017-06-30 10:01:55 1 plancher

Peut-il être implémenté avec 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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！