Анимация заставляет элемент выходить из экрана

Здесь приведена пересмотренная версия ответа @Tayrn, которая может помочь вам понять, что немного упростить:

Это может быть не лучший способ сделать это, но это помогло мне обернуть голову как сворачивать таблицы.

ID = строки, которые вы хотите свернуть

MY_KEY = столбец, который вы выбираете из исходной таблицы, которая содержит имена столбцов, которые вы хотите развернуть.

VAL = значение, которое вы хотите возвращать под каждым столбцом.

MAX (VAL) => Может быть заменен другими вспомогательными функциями. SUM (VAL), MIN (VAL), ETC ...

DECLARE @cols AS NVARCHAR(MAX),
@query  AS NVARCHAR(MAX)
select @cols = STUFF((SELECT ',' + QUOTENAME(MY_KEY) 
                from yt
                group by MY_KEY
                order by MY_KEY ASC
        FOR XML PATH(''), TYPE
        ).value('.', 'NVARCHAR(MAX)') 
    ,1,1,'')
set @query = 'SELECT ID,' + @cols + ' from 
         (
            select ID, MY_KEY, VAL 
            from yt
        ) x
        pivot 
        (
            sum(VAL)
            for MY_KEY in (' + @cols + ')
        ) p '

        execute(@query);
0
задан Zan Stanislaw 13 July 2018 в 08:14
поделиться

1 ответ

Поскольку у вас есть анимация, примененная к классу jump, значение offsetTop фактически изменяется при добавлении этого класса. Таким образом, вы не должны зависеть от offsetTop, и вместо этого вы должны использовать независимую переменную, которую вы установили сами, имея offsetTop в зависимости от it . Сначала установите его на offsetTop, но затем увеличивайте его, а не увеличивайте offsetTop, а затем установите для него top. Это, вероятно, сбивает с толку, поэтому позвольте мне опубликовать некоторый код.

Вы добавили бы это вокруг начала вашего скрипта.

var positionHorseUp;

Затем это к вашему событию загрузки.

positionHorseUp = horse[0].offsetTop;

Затем вы удалите эту строку ...

var positionHorseUp = horse[0].offsetTop;

... и замените ту, которая устанавливает положение top с этим.

horse[0].style.top = ++positionHorseUp + 'px';

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

(Также используйте requestAnimationFrame , а не setTimeout .Это более эффективно, потому что оно вызывается на каждой лакокрасочной рамке. Добавьте соответствующий код, чтобы компенсировать неопределенные интервалы времени между средами браузера.)

1
ответ дан Grant Gryczan 17 August 2018 в 13:38
поделиться
  • 1
    Спасибо за помощь. Лучший стример всех кодеров и лучший кодер всех стримеров. – Zan Stanislaw 13 July 2018 в 09:11
Другие вопросы по тегам:

Похожие вопросы: