Clever Geek Handbook

Activate animation / css translation with javascript

I am trying to disable javascript animation and use CSS animation instead. I am currently using jQuery animation.

I came across this site with a bunch of great css animations. For example:

.demo1 {
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}

.demo1:hover {
  -webkit-transform:translate(0px,10px);
  -moz-transform:translate(0px,-10px);
  -ms-transform:translate(0px,-10px);
  -o-transform:translate(0px,10px);
  transform:translate(0px,-10px);
}

I cannot figure out how to programmatically activate these animations. So, for example, instead of hover

how can I translate an element by calling elem.translate()

?

+3


source to share


3 answers


I may misinterpret what you are asking, but I think you may be wrong about what to "translate" to an element. The DOM element has a "translate" attribute as well as a "translate" css property. However, the element's "translate" attribute is just a boolean flag that determines whether the text in the element should be translated in the linguistic sense , this is not a callable function and has nothing to do with the css property.

As an aside, there are many more ways to translate an element programmatically. Some other people have already given a pretty good idea of ​​how to do this with jQuery. If you don't want to use jQuery, you can add and remove classes manually (the same goes for styles).

Here is an example I have prepared for adding / removing a class. It's pretty simple, but here's the relevant code to modify the class:

.translator {
  -webkit-transform:translate(0px,100px);
  -moz-transform:translate(0px,-100px);
  -ms-transform:translate(0px,-100px);
  -o-transform:translate(0px,100px);
  transform:translate(0px,-100px);
}
...
function move_box() {
  var the_box = document.getElementById("the-box");
  if (the_box.classList.contains("translator")) {
    the_box.classList.remove("translator");
  } else {
    the_box.classList.add("translator");
  }
}

By applying the class, the animation will start (and the deletion will be canceled). This can happen as many times as you would like.



One important note: for this example, I still have the "transition: all .5s ease-out" style; applied to the div before anything happens. This is just a universal default that determines how animation effects are applied to an element. There are several different approaches to this, but for the sake of simplicity, I'm going to just leave it that way.

Otherwise, you can add styles directly, for example :

function move_box() {
  var the_box = document.getElementById("the-box");
  set_translate(the_box, 100);
}

function set_translate(e, pix) {
  e.style["-webkit-transform"] = "translate(0px, "+ pix +"px)";
  e.style["-moz-transform"] = "translate(0px, -" + pix +"px)";
  e.style["-ms-transform"] = "translate(0px, -" + pix + "px)";
  e.style["-o-transform"] = "translate(0px, " + pix  + "px)";
  e.style["transform"] = "translate(0px, -" + pix + "px)";
}

Nothing fancy here - it sets each matching element directly by manipulating the styles on the element. As before, it relies on a separate class to indicate the transition style.

Personally, I find adding / removing a class is much superior. From a technical point of view, direct styling is more flexible, but if what you are aiming for should probably use a good library like jQuery transition (as pointed out in the comments). However, if you just want to programmatically apply multiple canned effects, changing classes on the fly is a great solution.

+7


source


If you already have CSS, you can run it in jquery by executing $('.demo1').trigger('hover');

to simulate the hover event, or change the css selector from .demo:hover

to .class-name

and just add this class using$('.demo').addClass('class-name');



+2


source


You can use jQuery.css.fn

CSS to apply rules.

$('.demo1').click(function(){
    $(this).css({
        transform: 'translate(0px,-10px)'
    });
});

Or add a class to the element:

$('.demo1').click(function(){
    $(this).toggleClass('translate');
});


.translate {
  -webkit-transform:translate(0px,10px);
  -moz-transform:translate(0px,-10px);
  -ms-transform:translate(0px,-10px);
  -o-transform:translate(0px,10px);
  transform:translate(0px,-10px);
}
0


source






More articles:


All Articles