CSS 翻译到顶部<ul>与 animation</ul>

Question

我想要实现的是将<UL>中的项目翻译到列表顶部但具有过渡效果。 这是我到目前为止所拥有的：

 $( "#button" ).click(function() { $("#select").addClass("is-moved"); });

 .navbar-nav{ margin 0; }.nav{ float: none; list-style: none; padding-left: 0; }.singlechatContainer { -moz-transition: all 2s; -webkit-transition: all 2s; -o-transition: all 2s; transition: all 2s; }.is-moved { position: absolute;important: z-index; 10:important; left: 0; right: 0; transform: translateY(calc(-20vw + 70px)); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="button">Test button</button> <ul class="nav navbar-nav"> <li class="singlechatContainer ">Test</li> <li class="singlechatContainer ">Test</li> <li class="singlechatContainer ">Test</li> <li class="singlechatContainer ">Hello1</li> <li id="select" class="singlechatContainer ">Hello2</li> <li class="singlechatContainer ">Hello3</li> <ul>

我的问题是我必须将容器 position 更改为绝对容器才能制作 animation。 但我不知道如何将其改回并将其保留为 UL 中的第一项。

我想要实现的看起来像这样，但 'hello1' 成为第二项：

另一个问题是，如果您在移动时滚动，它将移动到列表的可视顶部并且不会继续（我知道使用我当前的代码很明显，但我不知道如何实现这一点）。 这是一个向下滚动时会发生什么的示例（我不想要的）：

我希望它继续向上但在“新聊天”的块下

有人知道如何实现这一目标吗？ 它也可以在 javascript 或 jQuery 中。 提前致谢：：）

Answer 1

有改进的余地，但或多或少符合我的想法。

https://jsfiddle.net/phaelax/efgLub1p/4/

        var offset = 0;
        
        
        $(function(){
                    
            $('#thing').on('click', '.singlechatContainer', function(e){
                if (!$('#thing').children('li.moving').length){
                    $('#thing').children('li').removeClass('selected');
                    $(e.target).addClass('moving selected');
                    xi = setInterval("moveItem()", 10);
                }
            });
        
        });
        
        
        function moveItem(t){
            
            var $m = $('#thing').children('li.moving');
            offset += 1;
            
            
            
            if ($m.not(':first-child').length){
                if (offset >= $m.outerHeight()){
                    $m.prev().before($m);
                    offset = 0;
                }
            }else{
                offset = 0;
                clearInterval(xi);
                $m.removeClass('moving');
            }
            
            $m.css('margin-top', '-'+offset+'px').css('margin-bottom', offset+'px');
            

        }

javascript

.singlechatContainer{padding:4px;color:#EEE;position:relative;}
.selected{background:#3399ff;border-radius:3px;color:white}
ul{list-style:none;background:#3a3a3a;font-family:arial}
ul li:hover{cursor:pointer}
.moving{z-index:1;}

css

<body>

    
    <div style="width:300px;">
        <ul id="thing">
            <li class="singlechatContainer ">Apples</li>
            <li class="singlechatContainer ">Bananas </li>
            <li class="singlechatContainer">Grapefruits</li>
            <li class="singlechatContainer ">Peaches</li>
            <li class="singlechatContainer ">Radishes</li>
            <li class="singlechatContainer ">Starfruit</li>
        </ul>   
    </div>

    
</body>

html

Answer 2

对于 Hello2 在 Hello1 之上移动的第一个问题，您需要在.nav中添加等于.singlechatContainer高度的padding-top 。

对于第二个问题，因为您只是转换为calc(-20vw + 70px)的固定值，它将停止。 相反，您应该使用top: 0; 确保它一直到顶部，无论滚动 position。 你不需要transform 。 此外，您可能需要添加position: relative对于您的.nav 。

对于这两个问题，我会将我的 CSS 修改为：

.nav {
    position: relative;
}

.nav.has-moved {
    padding-top: 40px; // <-- Adjust according to height of .singlechatContainer
}

.singlechatContainer {
    -moz-transition: all 5s;
    -webkit-transition: all 5s;
    -o-transition: all 5s;
    transition: all 5s;
}
.is-moved {
    position: absolute !important;
    z-index: 10 !important;
    left: 0;
    right: 0;
    top: 0; // <-- Notice, we removed transform
}

假设您在选择聊天时会将has-moved class 添加到您的.nav中。

CSS 翻译到顶部<ul>与 animation</ul>

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-07-07 12:51:28

解决方案2
0 2020-07-06 12:29:37

CSS 翻译到顶部<ul>与 animation</ul>

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-07-07 12:51:28

解决方案2 0 2020-07-06 12:29:37

解决方案1
1 已采纳 2020-07-07 12:51:28

解决方案2
0 2020-07-06 12:29:37