angularProject/app/directives/about.js

app.directive('about',['$document',function($document){
  var link = function(scope, element, attr){
    var aboutItemArr = element[0].querySelectorAll('.main-page .about-item');
    var aboutItemArrJq = angular.element(aboutItemArr);
    for (let i = 0; i < aboutItemArrJq.length; i++) {
      let aboutItemJq = angular.element(aboutItemArrJq[i]);
      aboutItemJq.on('mouseover', function(){
        aboutItemJq.children()[1].style.transition = 'all 0.3s ease-in';
        aboutItemJq.children()[0].style.transition = 'all 0.3s 0.3s ease-out';
      })
      aboutItemJq.on('mouseout', function(){
        aboutItemJq.children()[1].style.transition = 'all 0.3s 0.3s ease-out';
        aboutItemJq.children()[0].style.transition = 'all 0.3s ease-in';
      })
    }
  }

  return {
    link: link,
    restrict: 'E',
    replace: true,
    templateUrl: 'app/views/about.html',
    controller: function($scope){
    }
  }
}])