WinJS enterPage анимация не работает должным образом

Question

Я хотел добавить анимацию в свое приложение при вводе страницы, и подключил по умолчанию WinJS.UI.Animation.enterPage(element)и это работало нормально, скользя в элементе справа налево. Мне нужно сдвинуть его снизу (100 пикселей) вверх. После того, как я переопределил значения по умолчанию с WinJS.UI.Animation.enterPage(element, { top: "100px", left: "0px" }) Я не видел никакой анимации на моем экране, что странно. Однако в сочетании с WinJS.UI.Animation.exitPage(oldElement)анимация, казалось, работала, но я хотел еще больше откорректировать время.

Следование по https://msdn.microsoft.com/en-us/library/windows/apps/Dn127042(v=win.10).aspx не помогло. После использования примера из "Объединения пользовательских анимаций и переходов" в ссылке я мог видеть только изменение непрозрачности и исчезновение элемента, однако никакого перевода вообще не было. Я пробовал такое же соединение с WinJS.UI.Animation.exitPage()и добавив свой собственный customExitPage - в основном из WinJS и с непрозрачностью... и ничего не работает. Я также имел в виду некоторые реализации анимации - https://github.com/winjs/winjs/blob/ad8691b3d5227ff1576a5d2a90a42f022498d2a9/src/js/WinJS/Animations.js, чтобы получить контроль над временем.

Кто-нибудь еще с этим вопросом? или я что-то не так делаю... или WinJS ведет себя плохо?

РЕДАКТИРОВАТЬ: достаточно странно анимация "наверх" с enterPage(element, {top: "100px", left: "0px"}) начал работать. Однако пользовательская анимация все еще остается неуловимой.

Answer 1

Ну, я смог наконец понять "странное поведение". @Keyframes должен был быть установлен в CSS, и я пробовал несколько других вещей, и, по-видимому, именно поэтому он не работал.

Тем не менее, я бы, вероятно, сказал, что объяснение могло бы быть немного более ясным и на сайте.

когда мы уже предоставляем значения from - to в javascript, я бы иначе предоставил то же самое в качестве части CSS, что все еще странно.

Как упомянуто на сайте, добавьте это в css: @keyframes custom-translate-in { from { transform: translateY(50px); } to { transform: none; } }

и есть это в JS: function runCustomShowStoryboard() { return WinJS.UI.executeAnimation( target, { keyframe: "custom-translate-in", property: "transform", delay: 0, duration: 367, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", from: "translate(50px)", to: "none" }); }

Никогда не мог понять, почему и как начала работать анимация "снизу вверх" (вероятно, помог перезапуск Visual Studio)