Как сделать анимированный вывод списка?

Question

[slaxik123]

Есть массив ~100 объектов, сортируется, выводится, нужно сделать анимацию, например, фиксированный блок height: 500px; width: 200px;, и в нем плавно снизу вверх течет этот список.

Comments

[Rustam Bainazarov]

Вы ошибаетесь, если думаете, что описание понятное.

[slaxik123]

Рустам Байназаров, есть список сейчас он просто выводится, из-за того что он большой, высота блока становится слишком большой нужно чтобы высота блока была фиксированная, а список внутри плавно ехал снизу вверх

[twobomb]

slaxik123, А скрол нельзя добавить?

[slaxik123]

twobomb, такое себе, но работать должно как скролл ты правильно понимаешЬ)

[0xD34F]

подскажите кто сталкивался

То есть, кто не сталкивался, но способен с вашей проблемой разобраться - лучше бы им рта не раскрывать, пусть мимо проходят.

[slaxik123]

0xD34F, тогда я себе тоже туда приписал к группе не открывающих рот, так как я не сталкивался. Извините если задел кого-то.

Answer 1

[twobomb]

Comments

[slaxik123]

Спасибо!

[slaxik123]

twobomb Error in created hook (Promise/async): "TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them",
чет одолеть не могу, анимация не работает, и у меня цикл

list.children[0].offsetTop = 0; list.children[0].offsetHeight = 36

поэтому он не стартует, arguments.callee не могу понять что делает, если время есть обьясни плз

[slaxik123]

slaxik123, с цифрами разобрался, с arguments нет

[twobomb]

slaxik123, arguments.callee это ссылка на функцию внутри которой вызывается, тоже самое если бы ты назвал функцию например loop и вместо arguments.callee писал loop.

list.children[0].offsetTop = 0; list.children[0].offsetHeight = 36

Это чё такое.

[twobomb]

slaxik123, Без arguments.callee

function loop(){
	Array.from(list.children).forEach(c=>{
  	c.style.top = (c.offsetTop - speed ) +"px";
  	  })  	  
  	  while(list.children[0].offsetTop <= -list.children[0].offsetHeight){
  	var el = list.children[0];
  	    el.style.top = list.children[list.children.length-1].offsetTop + el.offsetHeight + 10 + 'px';
  	      list.removeChild(el);
  	        list.appendChild(el);
  	  }
	setTimeout(loop,10);
}
loop();

[twobomb]

slaxik123, Ошибка потому-что у тебя строгий режим.
"use strict";
В нем нельзя так писать

[slaxik123]

twobomb, все равно блин список выводится, элементы есть, спрятаны, а анимации нет(

[slaxik123]

var lists = document.querySelector("#list");
                var speed = 1;
                this.sortedArray.forEach(function(el,i){
                    var li = document.createElement("li");
                li.innerHTML = el.name + " " + el.rating;
                lists.appendChild(li);
                li.style.top = (i * (li.offsetHeight+10) ) +"px";
                });
                function loop(){
                Array.from(lists.children).forEach(c=>{
                    c.style.top = (c.offsetTop - speed ) +"px";
                    })  	  
                    while(lists.children[0].offsetTop <= -lists.children[0].offsetHeight){
                    var el = lists.children[0];
                        el.style.top = lists.children[lists.children.length-1].offsetTop + el.offsetHeight + 10 + 'px';
                        lists.removeChild(el);
                            lists.appendChild(el);
                    }
                setTimeout(loop,10);
                }
                loop();

[twobomb]

slaxik123, А стили прописаны правильно? У li там position:absolute и прочее?

[slaxik123]

#list{
position:relative;
margin:0;
padding:0;
height: 400px;
width:100%;
overflow:hidden;
}
#list li{
position:absolute;
list-style:none;
width:100%;
text-align:left;
padding:5px;
margin-bottom:10px;

}

[slaxik123]

twobomb, все основные стили как в примере..

[twobomb]

slaxik123, ошибки в консоли есть?

[slaxik123]

twobomb, нет, может я на vue неправильно что то делаю, сделал функцию в methods запускаю ее в руке created

[twobomb]

slaxik123, Ну насуйте везде console.log'ов и смотрите чё происходит, работает ли loop, изменяются ли координаты, что возвращают offsetTop и прочие

[slaxik123]

twobomb, loop выполняется как задумано, а вот цикл while не начинает свою работу
так как 0 больше -36

lists.children[0].offsetTop = 0 //тут равно нулю
lists.children[0].offsetHeight = 36//идея понятна
while(lists.children[0].offsetTop <= -lists.children[0].offsetHeight){
                    // eslint-disable-next-line no-console
                    console.log('tyt')
                    var el = lists.children[0];
                        el.style.top = lists.children[lists.children.length-1].offsetTop + el.offsetHeight + 10 + 'px';
                        lists.removeChild(el);
                        lists.appendChild(el);
                    }

[slaxik123]

twobomb, это я для вас написал просто

[twobomb]

slaxik123, А самое главное,тут смещает элементы? Попробуйте поменять параметр speed

Array.from(list.children).forEach(c=>{
  	c.style.top = (c.offsetTop - speed ) +"px";
   
  	  })

[twobomb]

slaxik123, Вообще list.children
содержит элементы?

[slaxik123]

c.style.top значение меняется когда в консоли выводишь, но в дом элементах нет

[slaxik123]

twobomb, и очень быстро меняется

[twobomb]

slaxik123, Ну так может оно меняется в виртуальном DOM, а его нужно как-то отрендерить на реальный. Потому-что помоему все эти реакты и вуи и прочие работают с виртуальным домом, а потом делают рендер

[slaxik123]

twobomb, да, содержит элементы li с разным значением offsetTop и одинаковым значение offsetHeight

[slaxik123]

twobomb, list.children список выводится с timeout, но значения offsetTop, не меняются у элементов

Answer 2

[0xD34F]

https://jsfiddle.net/duja84ys/