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-show或ng-hide添加和删除内容时，会自动添加ng-hide-remove。

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

使用CSS / Angular

1 个答案: