I'm trying to add css from my controller because I need to pass some data that I calculate in it, but I don't know if it's possible, I can only find the syntax with javascript but spaui5 doesn't support it. What I'm trying to do is the following:
var horaHand = that.getView().byId("horaHand");
var minutoHand = that.getView().byId("minutoHand");
var segundoHand = that.getView().byId("segundoHand");
var manillahora = hora + minuto/12;
horaHand.css("transform", "rotate(" + manillahora + "deg)");
minutoHand.css("transform", "rotate(" + minuto + "deg)");
segundoHand.css("transform", "rotate(" + segundo + "deg)");
but it doesn't work. Is there any way I can apply this css?
The original javascript code I'm trying is this:
const hourHand = document.querySelector('#hourHand');
const minuteHand = document.querySelector('#minuteHand');
const secondHand = document.querySelector('#secondHand');
hourHand.style.transform = `rotateZ(${(hours)+(minutes/12)}deg)`;
minuteHand.style.transform = `rotateZ(${minutes}deg)`;
secondHand.style.transform = `rotateZ(${seconds}deg)`;
or this
$('.hour-hand').css({
'transform': `rotate(${hourDegrees}deg)`
});
$('.minute-hand').css({
'transform': `rotate(${minuteDegrees}deg)`
});
$('.second-hand').css({
'transform': `rotate(${secondDegrees}deg)`
});
I solved the problem like this:
$(".hora").css("transform", "rotate(" + hourDegrees + "deg)");
$(".minuto").css("transform", "rotate(" + minuteDegrees + "deg)");
$(".segundo").css("transform", "rotate(" + secondDegrees + "deg)");
but as everybody know, SAPUI5 css only works if you put !important, because of this the code above didn't work. Do you know how can I put put !important in the code in the controller? I tried like this: $(".hora").css("transform", "rotate(" + hourDegrees + "deg) !important"); but doesn't work.