每一个控制器都有一个它自己的pageClass变量。改变了的值会被添加到index.html文件中的ng-view中，这样我们的每一个页面都有了不同的类名。通过这些不同的类名，我们可以为不同的页面添加不同的动画效果。
视图 page-home.html, page-about.html, page-contact.html
这些应该尽量保持清晰并且直接明了。我们只需要为每个页面准备一些文字以及链到其他页面的链接地址。
<!-- page-home.html --> <h1>Angular Animations Shenanigans</h1> <h2>Home</h2> <a href="#about">About</a> <a href="#contact">Contact</a> <!-- page-about.html --> <h1>Animating Pages Is Fun</h1> <h2>About</h2> <a href="#">Home</a> <a href="#contact">Contact</a> <!-- page-contact.html --> <h1>Tons of Animations</h1> <h2>Contact</h2> <a href="#">Home</a> <a href="#about">About</a>
现在，我们拥有了我们的页面，通过使用Angular的路由功能可以将这些页面注入到我们的主index.html文件中。
现在，所有的乏味的工作已经完成。我们的程序应该可以正常工作，并且可以很好的修改页面。接下来，让我们进入下一步，为页面添加动画效果！
为App添加动画效果 style.css
我们将使用CSS来添加所有的动画效果。这种方法很棒，因为我们所要做的事就是添加ngAnimate，并且不用修改我们的代码就可以添加CSS动画效果。
ngAnimate为我们的ng-view添加的两个类分别是.ng-enter和.ng-leave。你可以想象一些他们各自的作用。
基础样式
为了使我们的程序看起来不那么乏味，我们将会添加一些基础的样式。
/* make our pages be full width and full height */ /* positioned absolutely so that the pages can overlap each other as they enter and leave */ .page { bottom:0; padding-top:200px; position:absolute; text-align:center; top:0; width:100%; } .page h1 { font-size:60px; } .page a { margin-top:50px; } /* PAGES (specific colors for each page) ============================================================================= */ .page-home { background:#00D0BC; color:#00907c; } .page-about { background:#E59400; color:#a55400; } .page-contact { background:#ffa6bb; color:#9e0000; }
通过以上的代码，我们为3个页面添加了基础的样式。当我们点击程序的时候，我们可以看到它们应用了不同的颜色和间距。
CSS 动画
让我们定义我们的动画效果，之后我们将会了解一下当页面进入或离开的时候我们怎么才能为不同的页面应用不用的动画效果。
Vendor Prefixes: 我们将会使用默认的CSS属性，不带任何前缀的。会包含所有的前缀。
我们定义了6个不同的动画效果。每一个页面都会有他们各自的ng-enter 和 ng-leave 的动画效果。
/* style.css */ ... /* ANIMATIONS ============================================================================= */ /* leaving animations ----------------------------------------- */ /* rotate and fall */ @keyframes rotateFall { 0% { transform: rotateZ(0deg); } 20% { transform: rotateZ(10deg); animation-timing-function: ease-out; } 40% { transform: rotateZ(17deg); } 60% { transform: rotateZ(16deg); } 100% { transform: translateY(100%) rotateZ(17deg); } } /* slide in from the bottom */ @keyframes slideOutLeft { to { transform: translateX(-100%); } } /* rotate out newspaper */ @keyframes rotateOutNewspaper { to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; } } /* entering animations --------------------------------------- */ /* scale up */ @keyframes scaleUp { from { opacity: 0.3; -webkit-transform: scale(0.8); } } /* slide in from the right */ @keyframes slideInRight { from { transform:translateX(100%); } to { transform: translateX(0); } } /* slide in from the bottom */ @keyframes slideInUp { from { transform:translateY(100%); } to { transform: translateY(0); } }
结合以上我们所定义的动画效果，我们将会把它们应用到我们的页面上。
进入和离开动画效果
我们只需要将这些动画效果应用给.ng-enter 或 .ng-leave就可以为我们的页面添加不用的动画效果。
/* style.css */ ... .ng-enter { animation: scaleUp 0.5s both ease-in; z-index: 8888; } .ng-leave { animation: slideOutLeft 0.5s both ease-in; z-index: 9999; } ...