私はアニメーションが初めてです。私は単純なhtmlタブを持っています、私はCSSを使用してhttp://css3.bradshawenterprises.com/sliding/のような何かのカルーセルのようなコンテンツの移動をスライドさせたいと思います。 これを行う方法に関する参考情報は参考になります。ここで 純粋なCSSを使用してカルーセルのように移動/移動する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 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
それはあなたのPlunkerで働いています。または、提供されたサンプルが双方向でどのようにアニメーション化されるかを再現したいと思っていますか?純粋なCSSソリューションをお探しですか?もしそうなら、あなたのHTML構造にいくつかの変更が必要です - それはOKです。JavaScript(AngularJS)を既に使用しているのであれば、その例でどのようにして複製するのはなぜですか? – Shaggy
私は両方向にアニメーション化するための純粋なCSSソリューションを探していました – whippits
CSSにはまだ存在しない親セレクタを使用する必要があるため、マークアップの現在の構造を考えるとこれは不可能です。また、 ':active'や':focus'を使うと、あなたが現在のタブから離れた場所を失うことになります。 JSはあなたの最善の解決策です。 – Shaggy