Thursday, 25 June 2015

angular animation -- animation your css class


Two examples:


First:

<div ng-class="{xxx:onOff}" class="highlight">
  Highlight this box
</div>
<button ng-click="onOff=!onOff">Toggle</button>

<style>
.highlight {
  transition:0.5s linear all;
}
.highlight.xxx-add {
  background:red;
}
.highlight.xxx {
  background:yellow;
}
.highlight.xxx-remove {
  background:black;
}
</style>

xxx-add  is css for playing during the css is adding onto the html (if stransition is 0 , the css will not be able to run)

xxx   is the css  when you give the html has "xxx" css (onOff = true).  the style will keep.

xxx-remove      is css for playing during the css is removing from the html (if stransition is 0 , the css will not be able to run)





Second:



.css-class-add, .css-class-remove {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.css-class,
.css-class-add.css-class-add-active {
  color: red;
  font-size:3em;
}

.css-class-remove.css-class-remove-active {
  font-size:1.0em;
  color:black;
}

<p>
  <input type="button" value="set" ng-click="myCssVar='css-class'">
  <input type="button" value="clear" ng-click="myCssVar=''">
  <br>
  <span ng-class="myCssVar">CSS-Animated Text</span>
</p>


Explanation:



As you can see, ngClass support "add" and "remove"

So if you class name is "xxxx" then your aniation class are:


xxxx-add    and xxxx-remove

xxxx-add for the animation of adding your css on to html.

xxxx-remove is the animation which will be played when your css is removed from html.
















No comments:

Post a comment