Question

我的onClick功能工作正常，但我正在尝试应用一些css动画，因此菜单有一个软转换，因为它显示onClick。我已将动画应用于多个元素，但它们都不会应用过渡。

<div id="mobileNav" class="mobileNav mobileNavHidden">
    <div class="row hdrIcons">
        <div>
            <ul class="mobileIcons">
                <li>
                    <a href="#">
                        <i></i>
                    </a>
                </li>
                <li>
                     <a href="#">
                        <i></i>
                     </a>
                </li>
                <li>
                      <a href="#">
                         <i></i>
                      </a>
                </li>
            </ul>
        </div>
    </div>
    <ul>
        <li><a href="#">about</a></li>
        <li><a href="services.html">services</a></li>
        <li><a href="#">portfolio</a></li>
        <li><a href="#">blog</a></li>
        <li><a href="#">contact</a></li>
    </ul>
</div>

.mobileNavHidden {
    display: none;
}

 .mobileNav {
    z-index: 100000;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transition:all .26s ease-in-out;
    -moz-transition:all .26s ease-in-out;
    -ms-transition:all .26s ease-in-out;
    -o-transition:all .26s ease-in-out;
    transition:all .26s ease-in-out;
}

var nav = document.querySelector('#mobileNav')

document.querySelector('.hambugerMenu').addEventListener('click', ()=> {
    hideShowNav()
})
function hideShowNav() {
    if (nav.classList.contains('mobileNavHidden')) {
        nav.classList.remove("mobileNavHidden")
    }
    else {
        nav.classList.add("mobileNavHidden")
    } 
}

Answer 1

我已经提出JS Fiddle Example如何实现这一目标。

JS示例：

$('#button').click(function () {
        $("#myDiv").fadeToggle("slow", "linear")
    });

如果您愿意，还可以添加.slide功能。 =＆GT; Example

请检查JS Fiddle Link。我尽可能简单。如果您有任何进一步的问题，请在评论中提问。

将下拉动画应用于移动导航

1 个答案: