javascript - Existe-t-il une bonne solution pour afficher et masquer des animations?

Question

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

漂亮男人 · Answer

Essayez d'utiliser la transition :
démo

为情所困 · Answer

L'idée la plus simple est :

Le bloc n'a pas besoin d'être masqué, il suffit de régler la hauteur sur 0 et il sera invisible
Utilisez transition pour obtenir des effets d'animation
Pas besoin de l'utiliserhidden和show两个类名来控制，其实它就只有两种状态，所以可以认为无showC'est juste caché
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...

女神的闺蜜爱上我 · 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

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

高洛峰 · Answer

Peut-il être implémenté avec jquery ?

//头部引入jquery,toggle()

    bugbugbug

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket