유성에서 페이지 전환?

Question

유성 모바일 앱을 가지고 있습니다. 구조적으로는입니다. 일부 페이지 전환과 함께보기를 바느질해야합니다.

iron-transitioner 프로젝트를 살펴 보았지만 개발이 중단 된 것처럼 보입니까? (마지막 커밋 6 개월 전, 여전히 스파크 엔진 사용)

나는 'UI'모바일 프레임 워크 (래칫, 프레임 워크 7)를 보았지만 유성 서버와 잘 작동하지 못했습니다.

내가 시도 할 수있는 다른 간단한 (왼쪽/오른쪽) 페이지 전환 패키지/스크립트를 아는 사람이 있는지 궁금합니다. 내 UI에 약간의 (기대되는) 매끄러운 감각을 부여하는 것입니다.

Answer 1

IronRouter를 사용하는 jQuery는 어떤가요? 나는 또한 페이지 사이의 매끄러운 전환을 위해 무엇을

Router.configure({ 
    load: function() { 
    $('.content').animate({ 
     left: "-1000px", 
     scrollTop: 0 
    }, 400, function() { 
     $(this).animate({ left: "0px" }, 400); 
    }); 
}); 

간단한 fadeIn/페이드 아웃을 사용하는 것입니다.

Router.configure({ 
    load: function() { 
    $('html, body').animate({ 
     scrollTop: 0 
    }, 400); 
    $('.content').hide().fadeIn(800); 
    } 
}); 

Answer 2

나는 similar question here을 가졌습니다. 위의 JQ 방법이 어떻게 작동하는지 알려주십시오! Perpahs를 추가하면 transit.js 멋진 하드웨어 전환 효과를 얻을 수 있습니다. FWIW Percolate 팀이 Verso 모바일 앱에 IronTransitioner 버전을 사용하고 있다고 생각합니다. 여기에는 멋진 CSS3 전환이 있습니다. IronTransitioner 패키지를 사용해 보셨습니까? 당신이 말하는 것처럼/devel/심지어 6 개월 동안 만진 적이있다.

EDIT percolateStudio fork of IT이 댓글이 있습니다. "좋아요, 꽤 많이 불타고 있습니다."

Answer 3

animate.css 라이브러리를 사용하고 템플릿의 기본 콘텐츠에 애니메이션 클래스를 추가하는 것이 좋습니다. 내 '기본'템플릿은 다음과 같습니다.

<template name='home'> 
{{> navbar}} 

<div class="container animated fadeIn" id="content"> 
    {{> startBox}} 
</div> 

{{> notification}} 

<div id='background-image'></div> 
<div id='background-color'></div> 

{{> footer}}</template>