This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

JS/CSS style.transition
#1
Hi all,

in this JS, I manage CSS attributes of an image, but "transition" doesn't work : is there any reason ?

Thank's in advance for your help.

Code:
$(function(){
  if (typeof grp != 'undefined') {
    grp.listen('0/0/2', function(object, state) {
      var value = object.value;
      if (value == 10) {
    var elem = document.getElementsByClassName('testVR');
    elem[0].style.transition = 'height 2s linear 1s';
    elem[0].style.height     = '100px';
    elem[0].style.overflow   = 'hidden';       
        }
      },true);
  }
});
Reply
#2
Can you explain what are you trying to do? It's better to define transition in Custom CSS and change only the required properties from JS.
Reply
#3
it's about creating a graphic animation of a rolling shutter that opens and closes...
If you have it easier with CSS and changes of properties with JS, I'm interested!

I tested olso :

CSS :
.testVR {
transition = 'height 2s linear 1s';
}

2nd WAY for transition attribute in JS :
elem[0].style.setProperty("transition", "height 2s linear 0s");

But they doesn't work any more.
Reply
#4
Working example: additional class is blinds, status object is 32/1/1, data type is 0..100% scale so the height range is from 10px to 210px.
CSS:
Code:
.blinds {
  overflow: hidden;
  transition: height 2s linear;
}

JavaScript:
Code:
$(function() {
  grp.listen('32/1/1', function(obj) {
    $('.blinds').height(10 + obj.value * 2);
  });
});
Reply


Forum Jump: