Question

使用angularjs 1.4.3，我想将过渡动画应用于我的进入和离开视图。我一直在使用angularjs ng-view文档来尝试实现这些动画。我已经正确地路由了我的页面，所有这些都显得很好，但我似乎无法让这些动画正常工作。我不太了解一些文档，所以我可能完全不知道我是如何执行这段代码的。

的index.html

<link rel="stylesheet" href="css/main.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.min.js"></script>

<body ng-app="App">
    <main ng-controller="MainController" class="view-animate-container"> 
        <div ng-view class="view-animate"></div>
    </main>
</body>

CSS

.view-animate-container {
  position:relative;
}

.view-animate {
  padding:10px;
}

.view-animate.ng-enter, .view-animate.ng-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;

  display:block;
  width:100%;
  border-left:1px solid black;

  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding:10px;
}

.view-animate.ng-enter {
  left:100%;
}
.view-animate.ng-enter.ng-enter-active {
  left:0;
}
.view-animate.ng-leave.ng-leave-active {
  left:-100%;
}

Angularjs Ng-view动画

0 个答案: