遷移の長さに応じてCSSのテキストを表示および非表示にする方法

この例では、テキストを表示および非表示にするために「角度アニメーション」トランジションを使用していますが、長さ遷移の長さに応じてCSSのテキストを表示および非表示にする方法

<div class="toggle"> 
<h3 style="display:inline-block;">CSS toggle feature</h3> 
<div class="button" style="display:inline-block;"> 
<input ng-click="example1=!example1" type="checkbox" value="selected" id="someID1" class="toggle__input"> 
<label for="someID1" class="toggle__label">Show <span class="toggle__more"> More</span> 
<span class="toggle__less">Less</span> 
</label> 
</div> 
<div ng-show="example1" class="cssSlideUp ng-scope ng-animate" style=""> 
<div class="toggle__content"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis sequi quidem officia quis, repellendus voluptas voluptatibus in adipisci magnam consectetur, reprehenderit laborum ducimus ipsum dolores dicta vero. Laudantium inventore, reprehenderit!</p> 
</div> 
</div>

.cssSlideUp { transition: .5s linear all; height: 60px; overflow: hidden; margin: 2px 10px; }

出典

2016-04-18 Hussein.M

おそらく、あなたはng-classを使用してになります。

このページの下部には、例としてPlunkerがあります。

HTML

<body ng-app="ngAnimate"> 
    <input id="setbtn" type="button" value="set" ng-click="myVar='my-class'"> 
    <input id="clearbtn" type="button" value="clear" ng-click="myVar=''"> 
    <br> 
    <span class="base-class" ng-class="myVar">Sample Text</span> 
</body>

CSS

.base-class { 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
} 

.base-class.my-class { 
    color: red; 
    font-size:3em; 
}

出典

2016-04-18 22:21:43 ibraveheart

遷移の長さに応じてCSSのテキストを表示および非表示にする方法

答えて

関連する問題