AngularJS Animations

AngularJS CSS இன் உதவியுடன் அனிமேஷன் மாற்றங்களை வழங்குகிறது.

அனிமேஷன் என்றால் என்ன?

ஒரு HTML உறுப்பின் மாற்றம் உங்களுக்கு இயக்கத்தின் மாயையைத் தரும்போது அது ஒரு அனிமேஷன் ஆகும்.

உதாரணம்:

DIV ஐ மறைக்க செக்பாக்ஸை சரிபார்க்கவும்:

<body ng-app="ngAnimate">

Hide the DIV: <input type="checkbox" ng-model="myCheck">

<div ng-hide="myCheck"></div>

</body>

குறிப்பு:

பயன்பாடுகள் அனிமேஷன்களால் நிரப்பப்படக்கூடாது, ஆனால் சில அனிமேஷன்கள் பயன்பாட்டைப் புரிந்து கொள்ள எளிதாக்கும்.

எனக்கு என்ன தேவை?

உங்கள் பயன்பாடுகளை அனிமேஷன்களுக்குத் தயாராக்க, நீங்கள் AngularJS Animate நூலகத்தைச் சேர்க்க வேண்டும்:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>

பின்னர் நீங்கள் உங்கள் பயன்பாட்டில் ngAnimate தொகுதிக்கு குறிப்பிட வேண்டும்:

<body ng-app="ngAnimate">

அல்லது உங்கள் பயன்பாட்டிற்கு ஒரு பெயர் இருந்தால், உங்கள் பயன்பாட்டுத் தொகுதியில் ngAnimate ஐ ஒரு சார்பாகச் சேர்க்கவும்:

உதாரணம்

<body ng-app="myApp">

<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

ngAnimate என்ன செய்கிறது?

ngAnimate தொகுதி வகுப்புகளைச் சேர்க்கிறது மற்றும் நீக்குகிறது.

ngAnimate தொகுதி உங்கள் HTML உறுப்புகளை அனிமேட் செய்யாது, ஆனால் 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 உத்தரவு HTML உறுப்பு நிலையை மாற்றும் போது 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 பயன்படுத்தி அனிமேஷன்கள்

HTML உறுப்புகளை அனிமேட் செய்ய CSS மாற்றங்கள் அல்லது CSS அனிமேஷன்களைப் பயன்படுத்தலாம்.

இந்த டுடோரியல் இரண்டையும் உங்களுக்குக் காண்பிக்கும்.

கல்வி:

CSS அனிமேஷன் பற்றி மேலும் அறிய, jassif team இன் CSS மாற்ற டுடோரியல் மற்றும் CSS அனிமேஷன் டுடோரியலைப் படிக்கவும்.

CSS மாற்றங்கள்

CSS மாற்றங்கள் ஒரு குறிப்பிட்ட காலத்திற்குள் ஒரு மதிப்பிலிருந்து மற்றொரு மதிப்பிற்கு CSS பண்பு மதிப்புகளை மென்மையாக மாற்ற உங்களை அனுமதிக்கின்றன:

உதாரணம்:

DIV உறுப்பு .ng-hide வகுப்பைப் பெறும் போது, மாற்றம் 0.5 விநாடிகள் எடுக்கும், மேலும் உயரம் 100px இலிருந்து 0 க்கு மென்மையாக மாறும்:

<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}

.ng-hide {
  height: 0;
}
</style>

முயற்சிக்க:

மேலே உள்ள குறியீட்டை நகலெடுத்து உங்கள் HTML கோப்பில் ஒட்டவும். நீங்கள் DIV ஐ மறைக்கும் போது மென்மையான மாற்றத்தைக் காண்பீர்கள்.

CSS அனிமேஷன்கள்

CSS அனிமேஷன்கள் ஒரு குறிப்பிட்ட காலத்திற்குள் ஒரு மதிப்பிலிருந்து மற்றொரு மதிப்பிற்கு CSS பண்பு மதிப்புகளை மென்மையாக மாற்ற உங்களை அனுமதிக்கின்றன:

உதாரணம்:

DIV உறுப்பு .ng-hide வகுப்பைப் பெறும் போது, myChange அனிமேஷன் இயங்கும், இது உயரத்தை 100px இலிருந்து 0 க்கு மென்மையாக மாற்றும்:

<style>
@keyframes myChange {
  from {
    height: 100px;
  } to {
    height: 0;
  }
}

div {
  height: 100px;
  background-color: lightblue;
}

div.ng-hide {
  animation: 0.5s myChange;
}
</style>

குறிப்பு:

@keyframes என்பது அனிமேஷனின் வெவ்வேறு படிகளை வரையறுக்கப் பயன்படுகிறது. மேலே உள்ள உதாரணத்தில், அனிமேஷன் 100px இலிருந்து 0 வரை மாறுகிறது.

நடைமுறை உதாரணம்

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
}

.ng-hide {
  height: 0;
}
</style>
</head>
<body ng-app="myApp">

<h1>அனிமேஷன் முயற்சிக்க:</h1>
<input type="checkbox" ng-model="myCheck"> DIV ஐ மறைக்க

<div ng-hide="myCheck"></div>

<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

</body>
</html>

பயிற்சி

கீழே உள்ள பயிற்சியில் AngularJS அனிமேஷன்கள் பற்றிய உங்கள் புரிதலை சோதிக்கவும்:

AngularJS அனிமேஷன்கள் பயிற்சி

AngularJS அனிமேஷன்களுக்கு ngAnimate தொகுதி தேவை

✓ சரி! ngAnimate தொகுதி அனிமேஷன் வகுப்புகளைச் சேர்க்கிறது மற்றும் நீக்குகிறது

ngAnimate தொகுதி HTML உறுப்புகளை நேரடியாக அனிமேட் செய்கிறது

✗ தவறு! ngAnimate வகுப்புகளைச் சேர்க்கிறது, CSS அனிமேஷன்களை உருவாக்குகிறது

ng-show மற்றும் ng-hide ng-hide வகுப்பைச் சேர்க்கின்றன/நீக்குகின்றன

✓ சரி! இந்த உத்தரவுகள் ng-hide வகுப்பைக் கையாளுகின்றன

CSS அனிமேஷன்கள் JavaScript இல்லாமல் வேலை செய்யாது

✗ தவறு! CSS அனிமேஷன்கள் CSS மட்டுமே பயன்படுத்தி வேலை செய்யும்

பரிந்துரை:

நிலையான விளைவுகளுக்கு CSS மாற்றங்களையும், மிகவும் சிக்கலான விளைவுகளுக்கு CSS அனிமேஷன்களையும் பயன்படுத்தவும். இரண்டையும் jassif team இன் CSS டுடோரியல்களில் கற்றுக்கொள்ளலாம்.

பொதுவான அனிமேஷன் விளைவுகள்

மறைதல்/தோன்றுதல்

opacity மாற்றத்தைப் பயன்படுத்தி உறுப்புகளை மென்மையாக மறைக்கவும்/தோன்றச் செய்யவும்

ஸ்லைட் விளைவு

உயரம்/அகலம் மாற்றத்தைப் பயன்படுத்தி உறுப்புகளை ஸ்லைட் செய்யவும்

சுழற்சி

சுழற்சி மாற்றத்தைப் பயன்படுத்தி உறுப்புகளை சுழற்றவும்

பவுன்ஸ் விளைவு

@keyframes பயன்படுத்தி உறுப்புகளுக்கு பவுன்ஸ் விளைவு கொடுக்கவும்