آانگولار جی ای انیمیشن

ਸੀਐੱਸਐੱਸ ਦੀ ਮਦਦ ਨਾਲ, ਐਂਜੁਅਰਵਰਜ਼ ਏਨੀਮੇਸ਼ਨ ਟਰਾਂਸੀਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ。

ਏਨੀਮੇਸ਼ਨ ਕੀ ਹੈ?

ਏਨੀਮੇਸ਼ਨ ਹੈਲਡੀ ਐਲੀਮੈਂਟ ਦੀ ਤਬਦੀਲੀ ਨਾਲ ਤੁਹਾਨੂੰ ਇੱਕ ਚਲਦੇ ਇਨਸਾਨ ਦਾ ਅਹਿਸਾਸ ਦਿੰਦਾ ਹੈ。

实例

ਚੈਕਬਾਕਸ ਨੂੰ ਚੁਣਨ ਨਾਲ DIV ਨੂੰ ਛੁਪਾਓ:

<body ng-app="ngAnimate">
DIV ਨੂੰ ਛੁਪਾਓ：<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 ਮੋਡਿਊਲ:

<body ng-app="ngAnimate">

ਜੇਕਰ ਤੁਹਾਡਾ ਐਪਲੀਕੇਸ਼ਨ ਦਾ ਨਾਮ ਹੈ, ਤਾਂ ngAnimate ਮੰਤਰੀ ਮੋਡਿਊਲ ਵਜੋਂ ਜੋੜੋ:

实例

<body ng-app="myApp">
<h1>ਛੁੱਪਿਆ DIV：<input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

亲自试一试

ਐਨੀਮੇਸ਼ਨ ਦੇ ਮੋਡਿਊਲ ਦਾ ਕਿਆ ਕੰਮ ਹੁੰਦਾ ਹੈ?

ngAnimate ਮੋਡਿਊਲ ਕਲਾਸ ਜੋੜਦਾ ਜਾਂ ਹਟਾਉਂਦਾ ਹੈ。

ngAnimate ਮੋਡਿਊਲ ਤੁਹਾਡੇ HTML ਇਲੈਕਟ੍ਰੌਨਸ ਨੂੰ ਐਨੀਮੇਸ਼ਨ ਨਹੀਂ ਕਰਦਾ, ਪਰ ਜਦੋਂ ngAnimate ਕੁਝ ਘਟਨਾਵਾਂ (ਜਿਵੇਂ ਐਚਟੀਐੱਮਐੱਲ ਇਲੈਕਟ੍ਰੌਨਸ ਦੀ ਛੁੱਪਾਉਣ ਅਤੇ ਦਿਖਾਉਣ) ਦੀ ਨੋਟਸ ਕਰਨ ਦੇ ਸਮੇਂ, ਇਸ ਇਲੈਕਟ੍ਰੌਨਸ ਨੂੰ ਕੁਝ ਪ੍ਰਿਵਿਕਸ਼ਿਤ ਕਲਾਸ ਮੁੱਲ ਮਿਲਣਗੇ, ਇਹ ਕਲਾਸ ਮੁੱਲ ਐਨੀਮੇਸ਼ਨ ਦੀ ਮਦਦ ਨਾਲ ਵਰਤੇ ਜਾ ਸਕਦੇ ਹਨ。

AngularJS ਵਿੱਚ ਕਲਾਸ ਜੋੜਨ ਅਤੇ ਹਟਾਉਣ ਲਈ ਇਨਾਮ ਕਰਦੇ ਹਨ:

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

ng-show ਅਤੇ ng-hide ਇਨਾਮ ਜੋੜਦੇ ਹਨ ਜਾਂ ਹਟਾਉਂਦੇ ਹਨ: ng-hide ਕਲਾਸ ਮੁੱਲ

ਹੋਰ ਇਨਾਮ ਜੋੜਦੇ ਹਨ: 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 ਪ੍ਰਤੀਭੂਤੀ ਦਾ ਮੁੱਲ ਹੋਰ ਪ੍ਰਤੀਭੂਤੀ ਨਾਲ ਸਮੇਂ ਵਿੱਚ ਤਬਦੀਲੀ ਕਰ ਸਕਦੇ ਹੋ:

实例

当 DIV 元素获得 .ng-hide ਜਦੋਂ ਤਬਦੀਲੀ ਹੋਵੇਗੀ, ਮਿਆਦ 0.5 ਸਕਿੰਟ ਲਈ, ਉਚਾਈ 100px ਤੋਂ ਸਮੇਂ ਵਿੱਚ ਤਬਦੀਲੀ ਹੋਵੇਗੀ:

亲自试一试

CSS 动画

CSS 动画允许你在给定的持续时间内，将一个 CSS 属性值平滑地更改为另一个值：

实例

当 DIV 元素获得 .ng-hide 类时，将运行 myChange 动画，该动画将高度从 100px 平滑过渡到 0：

亲自试一试