title: Javafx scale a control according to it's parent
body: <p>I am writing a new Imageview with mask in Javafx.
  The mask can show according to the direction of mouse.
  Using Timeline makes it work well. But when the mask leaves, the mask is still visible.
  I want to hide the part of mask, which is out of the Image. How can I scale it?</p>
  
  <p>When mouse enter:
  <a href="https://i.stack.imgur.com/CXXkD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CXXkD.png" alt="enter image description here"></a>
  When mouse leave:
  <a href="https://i.stack.imgur.com/NTs7z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NTs7z.png" alt="enter image description here"></a></p>
  
  <p>And my animation code</p>
  
  <pre><code>private void leftOut() {
      KeyFrame k1 = new KeyFrame(Duration.ZERO, new KeyValue(mask.translateXProperty(), 0));
      KeyFrame k2 = new KeyFrame(time, new KeyValue(mask.translateXProperty(), control.getWidth()*-1.0));
      timeline = new Timeline();
      timeline.getKeyFrames().addAll(k1,k2);
      timeline.play();
  }
  </code></pre>
  
  <p>Other directions are just like this.</p>