2013-06-06 1 views
18

Я добавил несколько анимаций ng-view (угловой v 1.1.5) в приложение phonegap. Они отлично работают в браузере при тестировании с использованием пульсации и при указании браузера мобильного телефона (в данном случае, Android-хром) на приложение онлайн, но при установке с помощью телефонного разговора анимация не запускается. Я не уверен, что проблема связана с телефонной связью или с угловым. Сначала я подумал, что это просто оживление слишком быстро, поэтому я замедлил их до 1,5 с, но ничего не изменил в приложении.Угловые анимации и телефонные звонки не работают на мобильном телефоне

Является ли это проблемой разрыва в телефоне, угловой проблемой и/или каким образом мы можем использовать их?

CSS определены анимация:

.view-enter, .view-leave { 
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; 
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; 
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; 
} 

.view-enter { 
    opacity:0; 

} 
.view-enter.view-enter-active { 

    opacity:1; 
} 

.view-leave { 

    opacity:1; 
} 
.view-leave.view-leave-active { 
    left:-100px; 
    opacity:0; 
} 

Опять эти отлично работают в браузере телефона, только не тогда, когда он находится внутри приложения PhoneGap. Использование Adobe build для создания приложения. Я также получаю css и отображаю на странице только для подтверждения, что фактический файл css включен в сборку phonegap (он есть).

По одному из комментариев пользователя, вот HTML. Остальное обрабатывается анимацией по умолчанию углового. Они отлично работают при запуске в браузере, но не при запуске в телефонной заторе. Маршрутизация работает, ng-view изменен, но анимация никогда не возникает.

<div class="container-fluid" id="viewer" ng-view ng-animate="{enter: 'view-enter', leave: 'view-leave'}" > 


    </div> 

Проверено на Nexus 4.

+0

Какая платформа? IOS или Android? –

+0

Я закончил с использованием предварительно сделанного решения css - http://daneden.me/animate/ Работает фантастически на IOS, по крайней мере. –

+0

@AdamWare Я тестировал его на Android 4.2, в частности, nexus 4. – lucuma

ответ

0

Это, безусловно, проблема с фондового браузер Android 4.2 в. Первый ключ заключается в том, что он отлично работает на рабочем столе и в Chrome, но не в Phonegap. InAppBrowser использует браузер Android.

Поддержка анимации (и HTML5 в целом) была довольно ужасной в Android 4.2. Вот handy rundown этих причуд.

Надеюсь, вам удастся обновить версию Android с июня!

1

Вы можете посмотреть в CocoonJS (работает с Cordova) или Crosswalk в качестве путей для ускорения всего маневра, связанного с браузером, при развертывании на старых Android.