Question

我有一个基本页面，您可以点击几个按钮来显示弹出窗口。在这个弹出窗口中，您有不同的按钮，onClick事件会创建一个div slideUp并显示一些newContent。

我的问题来自这样一个事实：当你点击不同的按钮时，一个类被从a中移除并添加到当前的类中。但是因为删除这个类并将其放回是一个快速操作我的css过渡属性没有时间注意修改（我猜）因此不播放动画。

我解决这个问题的想法是在删除类之后放入一个sleep函数，这样css就有时间生效，然后把它放回另一个div。但它并不总是有效，它会被不一致地触发。

我无法提供任何fiddlelink或使用SO的代码片段。我没有完全访问互联网只有少数网站可供我使用，如SO或Microsoft MSDN。

这是我的HTML：

<html>
<body>
    <div>       
        <input type="button" style='width : 100px; height: 100px; padding-left: 30px;' value="B2" onclick="removeAll();document.getElementById('customFilterRSp2').style.display='block';"/>
    </div>

    <div id="customFilterRSp2" class="filterRSp" >
        <div class="wraper">
            <div >
                <input type="button" value="Opt1" style = "float: left" onclick="SlideUp(this.parentNode.parentNode,2);"/>

                <input type="button" value="Opt2" style = "float: left" onclick="SlideUp(this.parentNode.parentNode,3);"/>

                <input type="button" value="close" style = "float: right" onclick="closeSlide(this.parentNode);"/>
            </div>
        </div>

        <div id="subCustomFilter3" class="subfilterRSp">
            <div >
                <input type="button" value="SOUS OPT 2" style = "float: left" onclick="SlideUp(this.parentNode.parentNode,3);"/>
                <input type="button" value="close" style = "float: right" onclick="closeSlide(this);"/>
            </div>
        </div>      

        <div id="subCustomFilter2" class="subfilterRSp">
            <div >
                <input type="button" value="SOUS OPT 1" style = "float: left" onclick="SlideUp(this.parentNode.parentNode,2);"/>
                <input type="button" value="close" style = "float: right" onclick="closeSlide(this);"/>
            </div>
        </div>
    </div>

</body>
<html>

CSS：

<style>
.wraper{
    height: 100%
}
.subfilterRSp{
    display : none;
    position : relative;
    margin-left: -20px;
    left : 0;
    width : 100%;
    height : 470px;
    padding : 20px;
    box-shadow : 0 0 10px 0px rgba(50,50,50,0.3);
    background-color : white;
    z-index: 1000;
    overflow: auto;
}
.filterRSp{
    display : none;
    position : relative;
    left : 10%;
    width : 80%;
    height : 400px;
    padding : 20px;
    box-shadow : 0 0 10px 0px rgba(50,50,50,0.3);
    background-color : white;
    z-index: 1001;
    overflow: hidden;
}

.slideUp{
  height: 30px;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  -webkit-transition: height 0.2s; 
  -moz-transition: height 0.2s; 
  -ms-transition: height 0.2s; 
  -o-transition: height 0.2s; 
  transition: height 0.2s;
    z-index : 1100
}

错误的javascript：

<script>
function closeSlide(el){
    el.parentNode.parentNode.style.display = "none";
}

function SlideUp(el, n){
    els = document.querySelectorAll('.slideUp');
    for (var i = 0; i < els.length; i++) {
        els[i].classList.remove('slideUp');
    }   

    els = document.querySelectorAll('.currentSlideUp');
    for (var i = 0; i < els.length; i++) {
        els[i].classList.remove('currentSlideUp');
        els[i].style.display = "none";
    }

    setTimeout(function(){
        el.className += "  slideUp";
        var curEl = document.getElementById('subCustomFilter'+n);
        curEl.className += " currentSlideUp";
        curEl.style.display = "block";

    }, 10);


}

function removeAll(){
    var els = document.querySelectorAll('.subfilterRSp');
    for (var i = 0; i < els.length; i++) {
        els[i].style.display = 'none';
    }   
    els = document.querySelectorAll('.slideUp');
    for (var i = 0; i < els.length; i++) {
        els[i].classList.remove('slideUp');
    }   

    els = document.querySelectorAll('.filterRSp');
    for (var i = 0; i < els.length; i++) {
        els[i].style.display = 'none';
    }

}

要在Opt1和Opt2之间看到问题点击它会使div滑动，有时它会切换到没有动画的另一个div。

我的setTimeOut似乎每次被调用时都不会被触发

0 个答案: