+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Scripting (https://forum.logicmachine.net/forumdisplay.php?fid=8)
+--- Thread: JS/CSS style.transition (/showthread.php?tid=3075)
JS/CSS style.transition - SigmaTec - 23.12.2020
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);
}
});RE: JS/CSS style.transition - admin - 23.12.2020
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.
RE: JS/CSS style.transition - SigmaTec - 23.12.2020
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.
RE: JS/CSS style.transition - admin - 28.12.2020
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);
});
});