[Solved] jQuery and Angular for animation (with addClass?)


#1

Hi!

I’m new in Angular so I’ve got some troubles… I have to make an animation (to symbolise a progression). For now, it works on my browser my not on my mobile (android). Here is the gif (sorry for the bad quality…) of the render on my desktop (that’s what I want on my mobile!):

To do it, I have a html array like this (witch corresponds to the animated areas in the gifs):

  <table tableQuadrillage>
        <tbody>
              <tr class="lgne1">
                    <td class="square11></td>
                    <td class="square12></td>
                    <td class="square13></td>
              </tr>
              <tr class="lgne2">
                    <td class="square21></td>
                    <td class="square22></td>
                    <td class="square23></td>
              </tr>
        </tbody>
  </table>

I want to add the class “analyzed” to the td (random). That’s why I made a directive:

  .directive('tableQuadrillage', function($timeout, $compile) {
	return {
		restrict: 'A',
		link: function(scope, element, attributes) {
			element = jQuery(element); // My table
			var table = [];
			var i, j, k = 1, numberOfSquares = 2 * 3, currentClass;

			// Initialization of the array
			for(var i = 1 ; i < 3 ; i++) {
				for(var j = 1 ; j < 4 ; j++) {
					table.push(".square"+i+j);
				}
			}

			// Function which darken the square
			var darkenSquare = function() {
				// Get a random square
				currentClass = table[Math.floor(Math.random() * table.length)];

				// Delete the square's class from the table array
				var index = table.indexOf(currentClass);
				if (index > -1) {
				    table.splice(index, 1);
				}

				// Apply the analyzed class to the square
				var td = element.find(currentClass).addClass('analyzed');

				// If numberOfSquares != k, do it again
				k++;
				if(k <= numberOfSquares) {
					scope.$apply;
					$timeout(darkenSquare, 10000);
				}
				else {
					scope.loadStep3();
				}
			}
			$timeout(darkenSquare, 0);
		}
	}

Maybe it’s not the right way to get an element with AngularJS but I just don’t know how to do differenlty.

Thanks a lot for your help!


#2

Solved! jQuery has to be loade before Angular =)


#3

Looks great. However, I’m not sure if jQuery is necessary (unless you’re using it elsewhere?), I believe you can achieve the same thing with angular.element


#4

To add to what @notmatt has stated, you may not need jquery. Angular’s jqlite has some pretty basic jquery functions that you could use.

https://docs.angularjs.org/api/ng/function/angular.element


#5

Yes, exaclty, I replaced:

  var td = element.find(currentClass).addClass('analyzed');

with

 angular.element(document.querySelector(classeASupprimer)).addClass('analyzed');

Thanks!


#6

Again, looks like an awesome example. Maybe a nice public codepen demo? :smile:


#7

+1, I wanna see that animation in action.


#8

I’m glad you appreciate the animation!

If you wanna see it… Here is the codepen :wink:

(And I’m sorry, the html part is awful. I made a big table with lots of tds… I’m sure there is another way to do it correctly but for now, I’m a little bit busy to look for it right now… I’ve got programming exams! ^^)


#9

Awesome job! Thanks for this :smile: