CSS转换不工作-使用单选按钮作为显示/隐藏

提问者：小点点

CSS转换不工作-使用单选按钮作为显示/隐藏

大家好，这对许多人来说似乎很容易，但我就是不明白为什么当我单击单选按钮显示隐藏的侧导航时不起作用。
所以我只使用html和css创建侧导航，我发现“我可以使用”单选按钮作为显示和隐藏内容的一种方式。我完成了显示和隐藏部分，但是我决定放一个css，这样在我单击show按钮之后，它不会立即显示，但是在转换时，与hide/Close按钮相同。

下面是我的代码片段

null

*{
    padding: 0;
    margin: 0;
}
.nav {
    display: none;
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 5s ease-in;
    padding-top: 60px;
    color: white;
    
}
#show:checked ~ .nav {
    display: block;
    z-index: 1;
    width: 250px;
    -webkit-transition: all 1s linear;
   -moz-transition: all 1s linear;
   -ms-transition: all 1s linear;
   -o-transition: all 1s linear;
   transition: all 1s linear;
}
#close:checked ~ .nav {
    display: none;
   background: rgb( 40, 44, 47 );
   
   opacity: 0.7;
   -webkit-transition: all 1s linear;
   -moz-transition: all 1s linear;
   -ms-transition: all 1s linear;
   -o-transition: all 1s linear;
   transition: all 1s linear;
}

<header class="header">
        <input type="radio" name="side" id="show">show
        <nav class="nav">
            <ul>
                <input type="radio" name="side" id="close">close
                <li>Home</li>
                <li>About</li>
                <li>Task sheets</li>
                <li>Poftfolio</li>
                <li>Contacts</li>
            </ul>
        </nav>
    </header>
    <h1>Hello</h1>

null

匿名用户

没有转换，因为您在隐藏元素时对其使用。

此时DOM中不存在该元素。然后给它一个宽度并将其添加到DOM中。但它是这样被创造出来的。从元素中删除，转换将应用。

null

*{
    padding: 0;
    margin: 0;
}
.header {
 transition: 2s ease-in-out all;
}
.nav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: all 1s ease-in-out;
    padding-top: 60px;
    color: white;
    
}
#show:checked ~ .nav {
    display: block;
    z-index: 1;
    width: 250px;
}
#close:checked ~ .nav {
    display: none;
   background: rgb( 40, 44, 47 );
   
   opacity: 0.7;
}

<header class="header">
        <input type="radio" name="side" id="show">show
        <nav class="nav">
            <ul>
                <input type="radio" name="side" id="close">close
                <li>Home</li>
                <li>About</li>
                <li>Task sheets</li>
                <li>Poftfolio</li>
                <li>Contacts</li>
            </ul>
        </nav>
    </header>
    <h1>Hello</h1>

匿名用户

它实际上并不起作用，因为您使用的属性不允许动画。而不是这样做，你可以创建一些不透明的东西，转换等。

此外，为了防止dbl单击，可以使用。以下是它的文档:https://developer.mozilla.org/en-us/docs/web/css/pointer-events

我为你创建了一个小代码笔，让你真正了解正在发生的事情。https://codepen.io/snoh666/pen/vwkrber

匿名用户

试试看:

null

*{
    padding: 0;
    margin: 0;
}
.nav {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: -100%;
    background-color: #111;
    overflow-x: hidden;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    padding-top: 60px;
    color: white;
    
}
#show:checked ~ .nav {
    left: 0;
    z-index: 1;   
}

<header class="header">
        <input type="radio" name="side" id="show">show
        <nav class="nav">
            <ul>
                <input type="radio" name="side" id="close">close
                <li>Home</li>
                <li>About</li>
                <li>Task sheets</li>
                <li>Poftfolio</li>
                <li>Contacts</li>
            </ul>
        </nav>
    </header>
    <h1>Hello</h1>

CSS转换不工作-使用单选按钮作为显示/隐藏

共3个答案

相关问题

热门标签

CSS转换不工作-使用单选按钮作为显示/隐藏

共3个答案

相关问题

热门标签

微信关注