我在向 ui-router 元素添加类时遇到了一个非常奇怪的错误。添加事件类时，跨越整个 View 的绝对定位元素会捕捉到其父元素的宽度。
我在发现的 plunker 中重新创建了错误 here
我的代码是这样的:
index.html
<body ng-controller="MainCtrl">
<header>
<span ng-click="toggleNav()">☰</span>
</header>
<nav ng-class="{active: navOpen}">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</nav>
<section class="container" ui-view ng-class="{active: navOpen}"></section>
</body>
样式.scss
nav {
position: absolute;
width: 100px;
height: 100%;
top: 25px;
left: 0;
background: gold;
transform: translateX(-100px);
transition: all .5s linear;
&.active {
transform: translateX(0);
}
}
.container {
width: 90%;
margin: 0 auto;
padding: 60px 0;
transition: all .5s linear;
&.active {
transform: translateX(100px);
}
div {
@extend header;
height: auto;
top: 25px;
background: deepskyblue;
padding: 10px;
section {
width: 90%;
margin: 0 auto;
span:last-child {
float: right;
}
}
}
}
app.coffee
app = angular.module 'plunker', ['ui.router']
app.config ($stateProvider) ->
$stateProvider
.state 'foo',
url: ''
templateUrl: 'foo.html'
app.controller 'MainCtrl', ($scope) ->
$scope.navOpen = false
$scope.toggleNav = ->
$scope.navOpen = !$scope.navOpen
如有任何帮助，我们将不胜感激!
已解决:将宽度和自动边距更改为 5% 左右填充
最佳答案
在正文中添加overflow: hidden:
body{
overflow: hidden;
}
去掉容器上的width: 90%:
.container {
margin: 0 auto;
padding: 60px 0;
transition: all .5s linear;
}
关于css - 为什么用 Angular 添加类似乎会影响定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28862768/