Question

美好的一天，我尝试使用一些JS和CSS创建一个滑动菜单，但它不起作用。这是小提琴链接：

ul.show-child{
height: auto;
display: block;
-webkit-transition: height 1s ease;
-moz-transition: ease-in 2s none;
-ms-transition: ease-in  2s none;
-o-transition: ease-in  2s none;
transition: ease-in  2s none;  
}

https://jsfiddle.net/gkrja9jy/

我想要做的是在我显示隐藏的div时添加一些很酷的动画。顺便说一句，我刚从这个site

复制过渡效果

Answer 1

有一个纯CSS解决方案。我纠正了你的例子。确保编写正确的HTML代码。这是新代码和小提琴：

HTML code：

<ul class="custom-sidebar">
    <li>
        <a href="#" class="post-link">Accountancy</a>
     </li>
    <li>
        <a href="#" class="post-link">Grade School</a>
        <ul>
            <li><a href="#" class="post-link">Goals and Objectives</a></li>
            <li><a href="#" class="post-link">Clubs and Orgs</a></li>
            <li><a href="#" class="post-link">Photo Gallery</a></li>
            <li><a href="#" class="post-link">Summer Tutorial</a></li>
        </ul>
    </li>
</ul>

CSS代码：

li ul {
    display: block;
    height: 0px;
    overflow: hidden;
    -webkit-transition: all 0.25s ease-in-out;
       -moz-transition: all 0.25s ease-in-out;
        -ms-transition: all 0.25s ease-in-out;
         -o-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;  
}

li:hover ul {
    height: 100px;
    display: block;

}

.custom-sidebar a,.custom-sidebar a:visited {
    color: #0f5882;
    display: block;
    font-weight: bold;
    height: 25px;
    margin-left: -23px;
    padding-left: 23px;
    vertical-align: middle;
    width: 100% !important;
}

.custom-sidebar li {
    list-style: outside none none;
    padding-left: 17px;
}

.custom-sidebar li a {
    background-color: #ebecec;
    border-left: 6px solid #116b9e;
    padding-top: 2px;
    margin-bottom: 8px;
}

https://jsfiddle.net/u6yrL0a0/2/

如果不需要JavaScript，通常最好避免使用JavaScript。

Answer 2

你可以使用jquery来创建这样的动画：

var jq=jQuery.noConflict();
   jq(document).ready(function(){
        jq('.menu-div').hover(function(){
            if(jq(this).children(":first").hasClass('has-child')){
                var thisx = jq(this).children(":first");
                thisx.next('ul').slideDown(1000);

            }
        });
    });

   jq(document).ready(function(){
        jq('.menu-div').mouseleave(function(){
            if(jq(this).children(":first").hasClass('has-child')){
                var thisx = jq(this).children(":first");
                 thisx.next('ul').slideUp(1000);
            }
        });
    });

并且css将是这样的：

ul.hide-child{
    display: none;
    overflow: hidden;

}
ul li ul{
     -webkit-transition: all 1s;
    -moz-transition: all 1s ;
    transition: all 1s;   
    display:none;
    height:auto;
}

.custom-sidebar .post-link,.post-link:visited{
    color: #0f5882;
    display: block;
    font-weight: bold;
    height: 25px;
    margin-left: 0px;
    padding-left: 23px;
    vertical-align: middle;
    width: 100% !important;
}

.custom-sidebar li{
    background-color: #ebecec;
    border-left: 6px solid #116b9e;
    list-style: outside none none;
    margin-bottom: 0px;
    padding-left: 17px;
    padding-top: 2px;
}

https://jsfiddle.net/gkrja9jy/5/

为什么我的CSS动画不适用于我的侧边栏？

2 个答案: