Question

我在Angular中有一个包含我主视图的div。我也有一个坐在它下面的页脚。当我在视图之间转换（单击链接）时，页脚会移动到页面顶部，因为视图绝对定位，以便过渡顺利移动。

我的HTML：

<div class="view-container">
  <div ng-view class="view"></div>
  <div class='footer'>This is the footer</div>
</div>

我的CSS：

.view-container {
  position:relative;
}
.view-container > .view.ng-animate {
  position:absolute; // when animated make absolute
  top:0;
  left:0;
  width:100%;
  min-height:500px;
}

将页脚保持在容器下方以保持过渡平稳的最佳方法是什么？

https://plnkr.co/edit/ojvunIgraToS3EWJabCY?p=preview

代码来自snnkpet：

(function(angular) {
  'use strict';
angular.module('anchoringExample', ['ngAnimate', 'ngRoute'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {
      templateUrl: 'home.html',
      controller: 'HomeController as home'
    });
    $routeProvider.when('/profile/:id', {
      templateUrl: 'profile.html',
      controller: 'ProfileController as profile'
    });
  }])
  .run(['$rootScope', function($rootScope) {
    $rootScope.records = [
      { id:1, title: "Miss Beulah Roob" },
      { id:2, title: "Trent Morissette" },
      { id:3, title: "Miss Ava Pouros" },
      { id:4, title: "Rod Pouros" },
      { id:5, title: "Abdul Rice" },
      { id:6, title: "Laurie Rutherford Sr." },
      { id:7, title: "Nakia McLaughlin" },
      { id:8, title: "Jordon Blanda DVM" },
      { id:9, title: "Rhoda Hand" },
      { id:10, title: "Alexandrea Sauer" }
    ];
  }])
  .controller('HomeController', [function() {
    //empty
  }])
  .controller('ProfileController', ['$rootScope', '$routeParams', function($rootScope, $routeParams) {
    var index = parseInt($routeParams.id, 10);
    var record = $rootScope.records[index - 1];

    this.title = record.title;
    this.id = record.id;
  }]);
})(window.angular);

.record {
  display:block;
  font-size:20px;
}
.profile {
  background:black;
  color:white;
  font-size:100px;
}
    .view-container {
      position:relative;
    }
    .view-container > .view.ng-animate {
      position:absolute;
      top:0;
      left:0;
      width:100%;
      min-height:500px;
    }
.view.ng-enter, .view.ng-leave,
.record.ng-anchor {
  transition:0.5s linear all;
}
.view.ng-enter {
  transform:translateX(100%);
}
.view.ng-enter.ng-enter-active, .view.ng-leave {
  transform:translateX(0%);
}
.view.ng-leave.ng-leave-active {
  transform:translateX(-100%);
}
.record.ng-anchor-out {
  background:red;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-anchoringExample-production</title>
 
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
  
</head>
<body ng-app="anchoringExample">
  <a href="#/">Home</a>
<hr />
    <div class="view-container">
      <div ng-view class="view"></div>
      <div class='footer'>This is the footer</div>
    </div>
  
  <script type="text/ng-template" id='profile.html' class="profile record" ng-animate-ref="{{ profile.id }}">
    {{ profile.title }}
  </script>
  <script type="text/ng-template" id='home.html'>
    <h2>Welcome to the home page</h1>
      <p>Please click on an element</p>
      <a class="record"
         ng-href="#/profile/{{ record.id }}"
         ng-animate-ref="{{ record.id }}"
         ng-repeat="record in records">
        {{ record.title }}
      </a>
  </script>
  
</body>
  
  
</html>

CSS - 绝对显示的东西和过渡时的高度

0 个答案: