Is there a way to calculate the width needed to get to the end of the parent element in a css transition?

Is there a way to calculate the width needed to get to the end of the parent element in a css transition?
0.0 0

#1

I am trying to make a transition animation with a child of a div called .powerButton. The .powerButton div is supposed to translate to the end of its parent div, but currently I’m judging where the closest point to the end is by trying different transition lengths until it looks close enough to the end. This takes up a lot of time and isn’t precise, so I’m wondering if there are any ways to calculate how far you need to move a child div to translate it to the end of its parent div? Here is a link to the codpen I’m doing this on : https://codepen.io/icewizard/pen/JLBpNQ and the code :

    transition: all .2s linear;
    transform: translateX(2.5em);
}

.moveLeft{
    transition: all .2s linear; 
    transform: translateX(-2.5em);
} 

#2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

If you use the LESS processor, you can create variables and do some math operations

@button-well-width: 60px;     // we setup our values here....
@button-width: 40px;            // and later on, let LESS CSS processor compute
// the final values

#onOff > div {
  height:2em;
  border-radius:10%;
  width: @button-well-width;      // use variable
  background-color:#404040;
}

#onOff > div > div {
  height:100%;
  width: @button-width;        // use variable
  background-color:purple;
  margin-left:1px;
  border-radius:10%;
  border:3px solid black;
}

.moveRight{
    transition: all .2s linear;
    transform: translateX(@button-well-width - @button-width);   // maths!
}

.moveLeft{
    transition: all .2s linear; 
    transform: translateX(0 - @button-width);    // more maths!
} 


#4

Can you do the same with Sass?


#5

I think so… but for SASS, variables start with $ sign.


#6

thank you for the help