Question

我是动画的新手。我有一个简单的html选项卡，我想像旋转木马一样滑动内容，像这样http://css3.bradshawenterprises.com/sliding/使用CSS。任何有关如何执行此操作的指示都会有所帮助。

<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 class="tab-content" 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 class="tab-content" 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 class="tab-content" 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>
    </div>

这是我到目前为止的掠夺者 http://plnkr.co/edit/lImVRKBUcTH15xJm66q6?p=preview

Answer 1

好的，所以这是一种方法。这里的主要技巧是将内容元素上的默认transition-delay设置为高得离谱的高级别，以便它们永远不会“快速恢复”。在没有用户与其中一个选项卡交互的情况下，将其延迟到0时，当选项卡获得焦点时，将该延迟重置为0。除此之外，它只是基础：兄弟选择器，转换和放大器。定位。

＆＃13;

*{box-sizing:border-box;color:#000;font-family:sans-serif;font-size:14px;margin:0;outline:none;padding:0;}
body{
    margin:10px;
}
body>p{
    cursor:pointer;
    line-height:30px;
    padding:0 20px;
    display:inline-block;
}
body>p:focus{
    background:#ccc;
}
body>div{
    border:2px solid #ccc;
    overflow:hidden;
    white-space:nowrap;
    width:100%;
}
div>div{
    display:inline-block;
    left:0;
    padding:10px;
    position:relative;
    transition:left .5s linear 9999s;
    white-space:initial;
    width:calc(100% - 4px);
}
#tab1:focus~div>div{
    left:0%;
    transition-delay:0s;
}
#tab2:focus~div>div{
    left:-100%;
    transition-delay:0s;
}
#tab3:focus~div>div{
    left:-200%;
    transition-delay:0s;
}
h1{margin:0 0 10px;}

＆＃13;

<p id="tab1" tabindex="-1">Tab 1</p>
<p id="tab2" tabindex="-1">Tab 2</p>
<p id="tab3" tabindex="-1">Tab 3</p>
<div>
    <div>
        <h1>Page One</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero libero. Etiam a dui scelerisque, cursus ex non, dapibus nibh. Donec ac venenatis ligula. Curabitur mollis libero a elit tempus pretium. Ut ultricies viverra mollis. In efficitur purus at cursus pulvinar. Ut condimentum metus at ante viverra porttitor. Nullam vel purus mi. Nunc vel suscipit sapien, id faucibus sem. Sed tristique laoreet purus commodo molestie. Nulla volutpat feugiat enim at volutpat. Fusce dictum augue felis, sit amet sodales ipsum ultricies sed. Quisque molestie neque at lacus euismod, nec pharetra tellus vulputate. Fusce ut ante tellus. Curabitur lacinia gravida mauris sed pharetra.</p>
    </div>
    <div>
        <h1>Page Two</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero libero. Etiam a dui scelerisque, cursus ex non, dapibus nibh. Donec ac venenatis ligula. Curabitur mollis libero a elit tempus pretium. Ut ultricies viverra mollis. In efficitur purus at cursus pulvinar. Ut condimentum metus at ante viverra porttitor. Nullam vel purus mi. Nunc vel suscipit sapien, id faucibus sem. Sed tristique laoreet purus commodo molestie. Nulla volutpat feugiat enim at volutpat. Fusce dictum augue felis, sit amet sodales ipsum ultricies sed. Quisque molestie neque at lacus euismod, nec pharetra tellus vulputate. Fusce ut ante tellus. Curabitur lacinia gravida mauris sed pharetra.</p>
    </div>
    <div>
        <h1>Page Three</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero libero. Etiam a dui scelerisque, cursus ex non, dapibus nibh. Donec ac venenatis ligula. Curabitur mollis libero a elit tempus pretium. Ut ultricies viverra mollis. In efficitur purus at cursus pulvinar. Ut condimentum metus at ante viverra porttitor. Nullam vel purus mi. Nunc vel suscipit sapien, id faucibus sem. Sed tristique laoreet purus commodo molestie. Nulla volutpat feugiat enim at volutpat. Fusce dictum augue felis, sit amet sodales ipsum ultricies sed. Quisque molestie neque at lacus euismod, nec pharetra tellus vulputate. Fusce ut ante tellus. Curabitur lacinia gravida mauris sed pharetra.</p>
    </div>
</div>

＆＃13;

动画html选项卡内容使用纯css进入/离开像carousel一样

1 个答案: