使用 CSS/Angular 为标签内容设置动画

Question

我是动画新手。我有一个简单的 html 选项卡，我想在选项卡离开/进入时向左滑动内容。有关如何执行此操作的任何指示都会有所帮助。

HTML

<div class="service-tabs" >
        <ul class="nav nav-tabs">
            <li ng-class="{'active':tabSelected == 'one'}" ng-click="tabSelected = 'one'">TAB ONE</li>
            <li ng-class="{'active':tabSelected == 'two'}" ng-click="tabSelected = 'two'">TAB TWO</li>
            <li ng-class="{'active':tabSelected == 'three'}" ng-click="tabSelected = 'three'">TAB THREE</li>
        </ul>
        <div class="tab-contents">
            <div ng-show="tabSelected == 'one'" ng-class=" tabSelected == 'one' ? 'active' : 'inactive'">
                <div class="flex-it risk-factors">
                   <h1>One</h1>
                   <p>Lorem dim sum Cha siu bao Lo mai gai baked barbecue pork bao Egg custard tarts Popular shumai cha siu bao A creamy mango pudding Chiu-chao</p>
                </div>
            </div>
            <div ng-show="tabSelected == 'two'" ng-class=" tabSelected == 'two' ? 'active' : 'inactive' " style="width: 100%">
                 <h1>Two</h1>
                   <p>Bacon ipsum dolor amet beef ham hock salami cupim shankle kevin leberkas landjaeger ham. Prosciutto filet mignon bresaola rump. Tail ground round beef tri-tip turducken, meatloaf prosciutto short ribs filet mignon t-bone hamburger kevin pork chop. Meatball rump chicken hamburger drumstick, boudin pancetta short ribs ground round. Turkey cupim porchetta salami sausage t-bone pig. Bresaola t-bone tenderloin pork shoulder. Tongue pig corned beef, ball tip ham hock swine alcatra jowl pork strip steak sirloin flank leberkas.</p>
            </div>
            <div ng-show="tabSelected == 'three'" ng-class=" tabSelected == 'three' ? 'active' : 'inactive' ">
                 <h1>Three</h1>
                   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
        </div>

Plunker：http://plnkr.co/edit/E3MWYorAenammln2AeXK?p=preview

Answer 1

我整理了一个plnkr 来帮助您。里面有一些不同的东西，但要注意的主要是@keyframes（它可以让你指定动画的时间范围）以及 ng-hide-add 和 ng-hide-remove 类的使用。

.tab-contents .tab-content.ng-hide-add{
  position:absolute;
   animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
}

.tab-contents .tab-content.ng-hide-remove{
  position:absolute;
  animation: slide-in .5s forwards;
    -webkit-animation: slide-in .5s forwards;
}

@keyframes slide-in {
    0% { transform: translateX(100%);opacity:0;}
    100% { transform: translateX(0%);opacity:1;}
}

@-webkit-keyframes slide-in {
    0% { transform: translateX(100%);opacity:0;}
    100% { transform: translateX(0%);opacity:1;}
}

@keyframes slide-out {
    0% { transform: translateX(0%); opacity:1;}
    100% { transform: translateX(-100%); opacity:1;}
}

@-webkit-keyframes slide-out {
    0% { transform: translateX(0%); opacity:1;}
    100% { transform: translateX(-100%); opacity:1;}
}

当您使用 ngAnimate 库时（您需要包含它，因为它实际上与 angular.js 库是分开的......请参阅 plunkr 中的应用程序定义以了解它是如何注入的）ng-hide-add并且 ng-hide-remove 会在通过 ng-show 或 ng-hide 添加和删除内容时自动添加。

希望这会有所帮助！如果您有任何问题，请告诉我。