CODEWITHSUNDEEP
htmlangularjscsscss-animations
whippits
whippits

Reputation: 251

Animate tab contents using CSS/Angular

I am new to animations. I have a simple html tab, i would like to slide the contents left when tab leaves/enters. Any pointers on how to do this will be helpful.

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 here: http://plnkr.co/edit/E3MWYorAenammln2AeXK?p=preview

Upvotes: 1

Views: 1451

Answers (1)

sourdoughdetzel
sourdoughdetzel

Reputation: 664

I've put together a plnkr to help you out. There's a few different things in there, but the main things to be aware of are @keyframes (which let you specify the timeframe of animations) and the use of ng-hide-add and ng-hide-remove classes. 

.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;}
}

When you use the ngAnimate library (you'll need to include this as it is actually separate from the angular.js library... see the app definition in the plunkr for how it is injected) the ng-hide-add and ng-hide-remove get added automatically as things are being added and removed via ng-show or ng-hide.

Hope this helps! Let me know if you have any questions.

Upvotes: 1

Related Questions