1
저는이 커뮤니티에서 질문하는 데 익숙하지 않았습니다. (보통이 포럼에서 답변의 99.9 %를 찾았으므로) 'angularJS'에 비교적 익숙하지 않고 코드바를 사용하는 초보자들조차도, 나는 내 문제의 원인이 둘 모두의 조합이라고 믿고 있으며, 나는이 문제에 대한 해결책을 찾을 수 없었다.AngularJS와 Cordova를 사용할 때 ngAnimate가 작동하지 않습니다.
처음에는 응용 프로그램을 부트 스트랩하기 위해 Angularjs-Cordova Generator을 사용하고 있습니다.
정말 좋았지 만 애니메이션을 구현하는 데 문제가 있습니다. 나는 이것에 관한 많은 질문을 읽었으며 대부분의 사람들을위한 해결책은 나를 위해 일하지 않았다. 여기
내가 지금까지 읽은 내용은 다음과 같습니다스레드 : AngularJS 1.2 Animate not working
스레드 : AngularJS Animate Ng-view Transitions
다음AngularJS ngAnimate Documentation
내 실제 코드의 조각, 그리고 내가 주요 문제 믿는다 이 경로는 일반적으로 angularjs에서 처리되는이 생성기에서 다르게 처리됩니다.
routes.js 여기
angular
.module('core')
.config(['$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
/**
* @ngdoc event
* @name core.config.route
* @eventOf core.config
* @description
*
* Define routes and the associated paths
*
* - When the path is `'/'`, route to home
* */
$stateProvider
.state('login', {
url: '/',
templateUrl: 'modules/core/views/login.html',
controller: 'LoginController'
})
.state('eventos',{
url: '/eventos',
templateUrl: 'modules/core/views/eventos.html',
controller: 'EventosController'
});
<div ng-view class="toggle" ng-controller="EventosController">
<div class="panel panel-default">
<div class="panel-heading">
<div class="container">
<div class="clearfix"></div>
</div>
<a ng-click="back()"><h4 class="pull-left" style="text-align:center"><div class="glyphicon glyphicon-chevron-left"></div>Eventos</h4></a>
<button class="btn btn-primary pull-right" ng-click="crearEvento()"><div class="glyphicon glyphicon-plus"></div></button>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<input type="search" class="form-control app-search" placeholder="Filtrar.." />
<br/>
<div class="list-group">
<a ng-repeat="item in scrollItems" ng-click="select(item.id)" href="#" class="list-group-item" style="border-radius:0px;">
{{ item }} <i class="fa fa-chevron-right pull-right"></i>
</a>
</div>
</div>
</div>
여기 제가
을 demo.css 첨가는 CSS이다.toggle {
-webkit-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
-webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
}
.toggle.ng-enter {
opacity: 0;
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
}
.toggle.ng-enter-active {
opacity: 1;
}
.toggle.ng-leave {
opacity: 1;
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
}
.toggle.ng-leave-active {
opacity: 0;
}
.toggle.ng-hide-add {
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity: 1;
}
.toggle.ng-hide-add.ng-hide-add-active {
opacity: 0;
}
.toggle.ng-hide-remove {
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
display: block !important;
opacity: 0;
}
.toggle.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
기본적으로, 예제에서 보았 듯이, 이것은 애니메이션으로 실행되어야합니다. 그러나 그것들을하지는 않습니다.
실제로이 문제의 원인은 무엇입니까? 또는 내가 뭘 잘못하고 있니?
미리 감사드립니다.