我的网络应用在 style.css 中应用了 ng-animate 转换:
.ng-enter, .ng-leave {
position: absolute;
top: 8em;
left: -100%;
width: 100%;
transition: left .5s;
}
.ng-enter.ng-enter-active {
left: 0%;
}
.ng-leave {
left: 0%;
}
.ng-leave-active {
transition: left .5s;
left: 100%;
}
不幸的是，这导致它也被应用到我的导航栏，这导致它导致一个奇怪的故障，无论何时我登录或注销，链接在 View 中滑动半秒钟然后出现合适的地方:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="mainApp" ng-cloak>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=UnifrakturMaguntia" />
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="http://tappedout.net/tappedout.js"></script>
<!-- Latest compiled and minified CSS -->
</head>
<body id="background" ng-controller="mainController">
<div class="ourNav no-animate">
<div class="logo">Deckster</div>
<div>
<i class="fa fa-bars fa-3x" aria-hidden="true"></i>
</div>
<ul id="links">
<li ng-if="loginStatus !== true">
<div>
<a class="active" ui-sref="home" ui-sref-active="active">Home</a>
</div>
</li>
<li>
<div>
<a class="active" ui-sref="cardSearch" ui-sref-active="active">Card Search</a>
</div>
</li>
<li ng-if="loginStatus == true">
<div>
<a class="active" ui-sref="deckBuilder" ui-sref-active="active">Deck Builder</a>
</div>
</li>
<li ng-if="loginStatus == true">
<div>
<a class="active" ui-sref="deckCollection" ui-sref-active="active">Deck Collection</a>
</div>
</li>
<li ng-if="loginStatus == true">
<div class="logout">
<a class="active" ng-click="logout()" ui-sref-active="active">Log Out</a>
</div>
</li>
</ul>
</div>
<div ui-view class="view-container" ></div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script src="./node_modules/angular/angular.js"></script>
<script src="./node_modules/@uirouter/angularjs/release/angular-ui-router.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="./dropDownMenu.js"></script>
<script src="./app.js"></script>
<script src="./service.js"></script>
<script src="./controller.js"></script>
<script src="./cardSearchController.js"></script>
<script src="./deckBuilderController.js"></script>
<script src="./deckCollectionController.js"></script>
<script src="./homeController.js"></script>
<script src="./loginSuccessController.js"></script>
<script src="http://tappedout.net/tappedout.js"></script>
</body>
</html>
我试图添加类“no-animate”，希望链接不会四处滑动，但尽管很重要，但并没有帮助。
.no-animate {
-webkit-transition: none !important;
transition: none !important;
}
我需要做什么才能使我的“ourNav”类不受转换影响？请注意，我使用的是 Bootstrap ，所以我不知道这是否会导致它。
编辑:我不知道 z-index 是否会有所不同，但样式中的导航栏位于 z-index: 1，因此在平板电脑或手机上查看时它可以作为汉堡菜单下拉:
.ourNav {
background-color: black;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 5em;
align-items: center;
z-index: 1;
}
最佳答案
您可以在您的 css 中使用 :not(.no-animate) 来排除那些具有 no-animate 类的元素。像这样:
.ng-leave:not(.no-animate) {
transition: left .5s
}
在这种情况下 .ng-leave.no-animate 不会有过渡效果
编辑:
window.onclick = () => {
const elements = document.getElementsByClassName("element");
for (let i = 0; i < elements.length; i++) {
const element = elements[i];
element.classList.add("black");
}
}.element {
background-color: blue;
}
.element:not(.not-me) {
transition: background-color 2s;
}
.element.black {
background-color: black;
}<div class="element" > me </div>
<div class="element not-me" > not-me </div>
<div class="element" > me </div>看看点击时会发生什么。具有 not-me 类的元素不会进行转换。不需要使用!important，看具体情况即可。希望对你有帮助
关于css - 我的 !important "no-animate"类对我的导航栏没有异常(exception)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48328914/