首页 - 互联网

CSS实现渐隐渐现效果

作者: 五速梦信息网
时间: 2026年04月04日 13:46

CSS实现渐隐渐现效果

displaynone

实现

opacity

opacityopacity0transitionendopacity

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;


&lt;title&gt;opacity&lt;/title&gt;<br/>
&lt;style type=&#34;text/css&#34;&gt;<br/>
    .page{<br/>
        width: 200px;<br/>
        padding: 10px 20px;<br/>
        border: 1px solid #eee;<br/>
    }<br/>
    .container {<br/>
        overflow: hidden;<br/>
    }<br/>
    .container &gt; .options{<br/>
        opacity: 1;<br/>
        transition: all .5s;<br/>
    }<br/>
    .container &gt; .btn{<br/>
        color: #4C98F7;<br/>
        cursor: pointer;<br/>
        text-decoration: underline;<br/>
    }<br/>
    .container &gt; .hide{<br/>
        display: none;<br/>
    }<br/>
    .container &gt; .fold{<br/>
        opacity: 0;<br/>
    }<br/>
&lt;/style&gt;<br/>


&lt;/head&gt;

&lt;body&gt;


&lt;div class=&#34;page&#34;&gt;<br/>
    &lt;div class=&#34;container&#34;&gt;<br/>
        &lt;div class=&#34;btn&#34; onclick=&#34;operate(this)&#34; unfold=&#34;1&#34;&gt;隐藏&lt;/div&gt;<br/>
        &lt;div class=&#34;options&#34;&gt;<br/>
            &lt;div class=&#34;option&#34;&gt;选项1&lt;/div&gt;<br/>
            &lt;div class=&#34;option&#34;&gt;选项2&lt;/div&gt;<br/>
            &lt;div class=&#34;option&#34;&gt;选项3&lt;/div&gt;<br/>
            &lt;div class=&#34;option&#34;&gt;选项4&lt;/div&gt;<br/>
            &lt;div class=&#34;option&#34;&gt;选项5&lt;/div&gt;<br/>
            &lt;div class=&#34;option&#34;&gt;选项6&lt;/div&gt;<br/>
            &lt;div class=&#34;option&#34;&gt;选项7&lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
    &lt;/div&gt;<br/>
&lt;/div&gt;<br/>


&lt;/body&gt;

&lt;script type=“text/javascript”&gt;


function operate(btn){<br/>
    const optionsNode = document.querySelector(&#34;.container &gt; .options&#34;);<br/>
    const unfold = btn.getAttribute(&#34;unfold&#34;);<br/>
    if(unfold &amp;&amp; unfold===&#34;1&#34;){<br/>
        btn.innerText = &#34;打开&#34;;<br/>
        optionsNode.classList.add(&#34;fold&#34;);<br/>
        const finish = () =&gt; {<br/>
            optionsNode.classList.add(&#34;hide&#34;);<br/>
            optionsNode.removeEventListener(&#34;transitionend&#34;, finish); // 移除监听器<br/>
        }<br/>
        optionsNode.addEventListener(&#34;transitionend&#34;, finish); // 添加监听器<br/>
    }else{<br/>
        btn.innerText = &#34;隐藏&#34;;<br/>
        optionsNode.classList.remove(&#34;hide&#34;);<br/>
        setTimeout(() =&gt; optionsNode.classList.remove(&#34;fold&#34;));<br/>
    }<br/>
    btn.setAttribute(&#34;unfold&#34;, unfold === &#34;0&#34; ? &#34;1&#34; : &#34;0&#34;);<br/>
}<br/>


&lt;/script&gt;

&lt;/html&gt;

visibility opacity

visibilityhiddenopacityvisibilityvisiblevisibilityhiddenIE 9visibility: hidden;visibility: visible;3shiddenvisible3s3sopacity

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;


&lt;title&gt;opacity&lt;/title&gt;<br/>
&lt;style type=&#34;text/css&#34;&gt;<br/>
    .page{<br/>
        width: 200px;<br/>
        padding: 10px 20px;<br/>
        border: 1px solid #eee;<br/>
    }<br/>
    .container {<br/>
        overflow: hidden;<br/>
    }<br/>
    .container &gt; .options{<br/>
        opacity: 1;<br/>
        visibility: visible;<br/>
        transition: all .5s;<br/>
    }<br/>
    .container &gt; .btn{<br/>
        color: #4C98F7;<br/>
        cursor: pointer;<br/>
        text-decoration: underline;<br/>
    }<br/>
    .container &gt; .hide{<br/>
        display: none;<br/>
    }<br/>
    .container &gt; .fold{<br/>
        opacity: 0;<br/>
        visibility: hidden;<br/>
    }<br/>
&lt;/style&gt;<br/>


&lt;/head&gt;

&lt;body&gt;


&lt;div class=&#34;page&#34;&gt;<br/>
    &lt;div class=&#34;container&#34;&gt;<br/>
        &lt;div class=&#34;btn&#34; onclick=&#34;operate(this)&#34; unfold=&#34;1&#34;&gt;隐藏&lt;/div&gt;<br/>
        &lt;div class=&#34;options&#34;&gt;<br/>
            &lt;div class=&#34;option&#34;&gt;选项1&lt;/div&gt;<br/>
            &lt;div class=&#34;option&#34;&gt;选项2&lt;/div&gt;<br/>
            &lt;div class=&#34;option&#34;&gt;选项3&lt;/div&gt;<br/>
            &lt;div class=&#34;option&#34;&gt;选项4&lt;/div&gt;<br/>
            &lt;div class=&#34;option&#34;&gt;选项5&lt;/div&gt;<br/>
            &lt;div class=&#34;option&#34;&gt;选项6&lt;/div&gt;<br/>
            &lt;div class=&#34;option&#34;&gt;选项7&lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
    &lt;/div&gt;<br/>
&lt;/div&gt;<br/>


&lt;/body&gt;

&lt;script type=“text/javascript”&gt;


function operate(btn){<br/>
    const optionsNode = document.querySelector(&#34;.container &gt; .options&#34;);<br/>
    const unfold = btn.getAttribute(&#34;unfold&#34;);<br/>
    if(unfold &amp;&amp; unfold===&#34;1&#34;){<br/>
        btn.innerText = &#34;打开&#34;;<br/>
        optionsNode.classList.add(&#34;fold&#34;);<br/>
        const finish = () =&gt; {<br/>
            optionsNode.classList.add(&#34;hide&#34;);<br/>
            optionsNode.removeEventListener(&#34;transitionend&#34;, finish); // 移除监听器<br/>
        }<br/>
        optionsNode.addEventListener(&#34;transitionend&#34;, finish); // 添加监听器<br/>
    }else{<br/>
        btn.innerText = &#34;隐藏&#34;;<br/>
        optionsNode.classList.remove(&#34;hide&#34;);<br/>
        setTimeout(() =&gt; optionsNode.classList.remove(&#34;fold&#34;));<br/>
    }<br/>
    btn.setAttribute(&#34;unfold&#34;, unfold === &#34;0&#34; ? &#34;1&#34; : &#34;0&#34;);<br/>
}<br/>


&lt;/script&gt;

&lt;/html&gt;

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://juejin.cn/post/6844903497998024711

https://www.cnblogs.com/MrZhujl/p/10315177.html

https://blog.csdn.net/u012767761/article/details/87369414