watch:{
Value: function(){
console.log(this.RotateNumber())
TweenMax.to(this.$refs.dial, 2, {rotation: this.RotateNumber(), transformOrigin:"50% 100%"});
},
ValueOther: function(){
//TweenMax.to(this.$refs.rightArrow, 2, {x: this.MoveNumberOther(), transformOrigin:"50% 100%"});
console.log(this.RotateNumber())
TweenMax.to(this.$refs.dial, 2, {rotation: this.RotateNumber(), transformOrigin:"50% 100%"});
}
},
mounted: function(){
// TweenMax.set(this.$refs.middleArrow, {transformOrigin:"middle bottom"})
// Draggable.create(this.$refs.middleArrow, {type: "rotation", throwProps: true, transformOrigin:"50% 50%"});
//TweenMax.to(this.$refs.middleArrow, 2, {x: this.MoveNumber(), transformOrigin:"50% 100%"});
//TweenMax.to(this.$refs.rightArrow, 2, {x: this.MoveNumberOther(), transformOrigin:"50% 100%"});
console.log(this.RotateNumber())
TweenMax.to(this.$refs.dial, 2, {rotation: this.RotateNumber(), transformOrigin:"50% 100%"});
},
<polygon ref="dial" fill="black" points="430,350 430,175 410,175 435,115 460,175 440,175 440,350" :stroke="ArrowColorOther" style="stroke-width:5" />
I have this polygon that I am rotating when a page is mounted in Vue or when two different values change. If I navigate to the page before the values load the polygon is positioned where it should be. However, if I wait for the values to load and THEN navigate to the page the polygon has moved to the lower left of the svg it is in. I am wondering if there is an issue with rotating an object if it is not actually on the current screen.
Thanks for any help!