సిఎస్ఎస్ సహాయంతో, ఆంగులర్ జెఎస్ అనిమేషన్ ట్రాన్సిషన్స్ అందిస్తుంది.

అనిమేషన్ ఏమిటి?

అనిమేషన్ అనేది హెచ్ఎంఎల్ ఎలిమెంట్స్ యొక్క మార్పులు మీరు చలనం భావించే ఒక అనిమేషన్ ప్రతిబింబం అని అర్థం చేస్తుంది.

ఇన్స్టాన్స్

చెక్ బాక్స్ నిర్వహించడానికి డివి మరియు చెక్ బాక్స్ మార్చండి:

డివి మరియు చెక్ బాక్స్ మార్చండి: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>

స్వయంగా ప్రయత్నించండి

అనిమేషన్లు అప్లికేషన్లో పూర్తిగా ఉండకూడదు, కానీ కొన్ని అనిమేషన్లు అప్లికేషన్ను ఎక్కువగా అర్థవంతం చేస్తాయి.

నేను ఏమి అవసరం?

మీ అప్లికేషన్ అనిమేషన్ కోసం సిద్ధం చేయాలంటే, మీరు ఆంగులర్ జెఎస్ అనిమేషన్ లైబ్రరీని చేర్చాలి:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-animate.js"></script>

然后，你必须在应用程序中引用 ngAnimate 模块：

或者，如果您的应用程序有名称，请将 ngAnimate 添加为应用程序模块中的依赖项：

ఇన్స్టాన్స్

隐藏 DIV：
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

స్వయంగా ప్రయత్నించండి

నిజానికి ngAnimate పని చేస్తుంది ఏమిటి?

ngAnimate జోడించి తొలగిస్తుంది.

ngAnimate మోడ్యూల్ మీ హెచ్ఎంఎల్ ఎలిమెంట్స్ ను ఏనిమేషన్ చేయడానికి లేదు, కానీ ఈ మోడ్యూల్ క్లాస్సులను జోడించి తొలగిస్తుంది ఉంటే ngAnimate కొన్ని ఇవెంట్స్ (ఉదాహరణకు HTML ఎలిమెంట్స్ యొక్క మరగింపు లేదా చూపింపు) గురించి గమనించినప్పుడు, ఈ ఎలిమెంట్స్ కొన్ని ప్రిడఫైన్డ్ క్లాస్స్లను పొందుతాయి, ఈ క్లాస్స్లను ఏనిమేషన్స్ తయారు చేయడానికి ఉపయోగించవచ్చు。

AngularJS లో క్లాస్స్లను జోడించడం/తొలగించడం ద్వారా ఆదేశాలు ఉన్నాయి:

• ng-show
• ng-hide
• ng-class
• ng-view
• ng-include
• ng-repeat
• ng-if
• ng-switch

ng-show మరియు ng-hide ఆదేశం జోడిస్తాయి లేదా తొలగిస్తాయి ng-hide క్లాస్ విలువలు.

ఇతర ఆదేశాలు DOM లోకి ప్రవేశించినప్పుడు జోడిస్తాయి ng-enter క్లాస్ విలువలను జోడిస్తాయి, మరియు DOM నుండి తొలగించినప్పుడు జోడిస్తాయి ng-leave అట్రిబ్యూట్

హెచ్ఎంఎల్ ఎలిమెంట్స్ స్థానాన్ని మార్చినప్పుడుng-repeat ఆదేశం మరియు జోడిస్తుంది ng-move క్లాస్ విలువలు.

ఇంకా, ఏనిమేషన్ ప్రక్రియలో, HTML ఎలిమెంట్స్ ఒక క్లాస్ విలువల సమితిని కలిగి ఉంటాయి, ఏనిమేషన్ పూర్తి అయిన తర్వాత ఈ క్లాస్ విలువలను తొలగిస్తాయి. ఉదాహరణకు:ng-hide ఆదేశం ఈ క్లాస్ విలువలను జోడిస్తుంది:

• ng-animate
• ng-hide-animate
• ng-hide-add(ఎందుకంటే ఎలిమెంట్ మరగించాలి ఉంటే)
• ng-hide-remove(ఎందుకంటే ఎలిమెంట్ చూపించాలి ఉంటే)
• ng-hide-add-active(ఎందుకంటే ఎలిమెంట్ మరగించాలి ఉంటే)
• ng-hide-remove-active(ఎందుకంటే ఎలిమెంట్ చూపించాలి ఉంటే)

CSS ద్వారా ఏనిమేషన్ చేయడం

మేము CSS ట్రాన్సిషన్ లేదా CSS ఏనిమేషన్ ఉపయోగించవచ్చు మరియు హెచ్ఎంఎల్ ఎలిమెంట్స్ కు ఏనిమేషన్ ప్రభావాన్ని చేయడానికి ఉపయోగించవచ్చు. ఈ పాఠ్యక్రమం మీకు ఈ రెండినీ చూపిస్తుంది。

CSS ఏనిమేషన్ గురించి మరింత సమాచారం తెలుసుకోవడానికి, మా CSS ట్రాన్సిషన్ పాఠ్యక్రమం మరియు CSS ఏనిమేషన్ పాఠ్యక్రమం ను అభ్యసించండి。

CSS ట్రాన్సిషన్

CSS ట్రాన్సిషన్ మీరు కొనియుక్త కాలంలో ఒక CSS అట్రిబ్యూట్ విలువను మరొక విలువకు స్మోత్తుగా మార్చడానికి అనుమతిస్తుంది:

ఇన్స్టాన్స్

డివ్ ఎలంట్స్ పొందినప్పుడు .ng-hide కాలంలో, ట్రాన్సిషన్ 0.5 సెకన్లు కొనసాగుతుంది, అడుగుని పొడవు 100px నుండి స్మోత్తుగా ట్రాన్సిషన్ చేస్తుంది:

@keyframes myChange {
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}
.ng-hide {
  height: 0;
}
</style>

స్వయంగా ప్రయత్నించండి

CSS అనిమేషన్స్

CSS అనిమేషన్స్ సమయంలో ఒక CSS అట్రిబ్యూట్ విలువను మరొక విలువకు సుమారుగా మార్చగలరు:

ఇన్స్టాన్స్

డివ్ ఎలంట్స్ పొందినప్పుడు .ng-hide <style>

@keyframes myChange {
from {
  to {
    height: 100px;
  }
    height: 0;
  }
}
div {
  height: 100px;
  background-color: lightblue;
}
div.ng-hide {
  animation: 0.5s myChange;
}
</style>

స్వయంగా ప్రయత్నించండి