JS/CSS style.transition

[SigmaTec]

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);
  }
});

[admin]

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.

[SigmaTec]

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.

[admin]

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);
  });
});