1

ビュー間で単純なスライド効果を生成するために ng-view を使用しようとしています。私がそれを正しく行っているかどうかはわかりません。コードは次のとおりです。

スクリプト: (1.15)

<script src="js/lib/angular-1.1.5/angular.min.js"></script>

ルーティング：

app.config(function ($routeProvider) {
   $routeProvider.
      when("/", { templateUrl: "partials/loading.html" }).
      when("/session", {templateUrl: "partials/session.html", controller: "TimerController" }).
      when("/settings", { templateUrl: "partials/settings.html", controller: "SettingsController" }).
      otherwise({ redirectTo: "/" });

ビューを切り替えるために使用される ng-view と ng-click を含む HTML:

<div class="flex-container viewport">

<div class="flex-item-1">

  <div>
    <button class="overlay btn icon-cog" ng-click="changeView('/settings')" type="button"></button>   
  </div>  

</div>


<div ng-view  class="flex-item-2" ng-animate="{enter: 'enter', leave: 'leave'}"></div>


<div class="flex-item-3">

  <div>
    <button class="btn btn-5 btn-5a icon-cog"  ng-click="setTimer(3)">
      <span>3</span>
    </button>        
  </div>

  <div>
    <button class="btn btn-5 btn-5a icon-cog"  ng-click="setTimer(5)">
      <span>5</span>
    </button>        
  </div>

  <div>
    <button class="btn btn-5 btn-5a icon-cog"  ng-click="setTimer(10)">
      <span>10</span>
    </button>        
  </div>

  <div>
    <button class="btn btn-5 btn-5a icon-cog"  ng-click="setTimer(15)">
      <span>15</span>
    </button>        
  </div>

</div>

ビューの切り替えに使用するコントローラ fn:

    $scope.changeView = function (view) {
    $location.path(view);
};

アニメーション効果の実装に使用される CSS:

.enter-setup {
   position:absolute;
   -webkit-transition: 3.3s ease-out all;
   -webkit-transform:translate3d(100%,0,0);
}
.enter-setup.enter-start {
   position:absolute;
   -webkit-transform:translate3d(0,0,0);
}
.leave-setup {
   position:absolute;
   -webkit-transition: 3.3s ease-out all;
   -webkit-transform:translate3d(0,0,0);
}
.leave-setup.leave-start {
   position:absolute;
   -webkit-transform:translate3d(-100%,0,0);
}

コンテンツは引き続き表示され (ただし、ちらつきがあります)、スライド アニメーションは機能しません。どんな助けでも大歓迎です。

更新: CSS 構文を 1.15 に修正しました。残念ながら、まだ機能していません。私はフレックスボックスを使用していますが、これが問題の原因だと考えています。ng-animate + flexbox を使用するときに同様の問題を抱えている人はいますか?

4

1 に答える 1