javascript - Gibt es eine gute Lösung zum Ein- und Ausblenden von Animationen?

Question

Beispiel: Es hat den gleichen Effekt wie diese Animation. Nach dem Klicken auf die Schaltfläche wird es angezeigt und hat die gleichen Animationseffekte. Aber ich habe es definitiv zu kompliziert geschrieben. Gibt es eine einfachere Lösung (keine Notwendigkeit für Bibliotheken von Drittanbietern)?

漂亮男人 · Answer

试试用transition：
demo

为情所困 · Answer

比较简单的思路是：

方块无需隐藏，只需要设置高度为0就看不见了
用transition实现动画效果
不需要使用hidden和show两个类名来控制，其实它就只有两种状态，所以可以认为无show就是隐藏了
另外无需写一个show()和hide()分开绑定，其实你这个按钮点一下是展开，再点一下隐藏，用一个toggle()切换显示状态就可以了

我在你的代码上做了点修改，如下：
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

题主可以配合CSS3解决（如果不需要兼容IE的话）

高洛峰 · Answer

可以用jquery实现吗？

//头部引入jquery,toggle()

    bugbugbug

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial