'transition-duration' right: 0; positioning does not work. Help?

HTML-CSS
1

I have a design. I want the ball to slide slowly to either side when clicked. However, time only affects the color change. Why?

2

Hello @yasinkarax,

On my side, the ball pass from a side to another in changing the color. So it seems to work actually or maybe I didn’t understand what is your exact issue.

3

Hi, the problem is the ball didn’t pass slowly like color change.

4

Ah… @LucLH if you tap the button 3-4 times, you will see that just the color is changing… the button won’t switch anymore

5

Indeed I didn’t notice this

6

The issue is probably in the JavaScript code. I am trying to check, but I am learning JavaScript so I will not maybe be the better help here. Don’t you think you should use a loop for this kind of things?

7

I found your issues after many analyses. The issue is well in the JavaScript. Let me explain you. In your CSS, to define your ball, you used the position absolute. You didn’t tell to your code to put by default at the left, because it will always stay at the left if you apply that property. So:

#ball {
  position: absolute;
  left: 0;
}

This code would always let the ball at the left, you know it, that’s why you didn’t use it. Now let’s take a look to your JavaScript code:

function startCal() {
  ball.style.right = "0";
}

function endCal() {
  ball.style.right = "0";
}

I really simplified your code to show you the issue. Did you see what happens when you click the ball? At start it is red because of the CSS you applied and it is at the left because of the position property and its value absolute. Then you click one time, it will become green and go at the right. At this moment, you are executing the startCal() function. Then if you click again it will become red and pass at the left. At this second click you are in the endCal() function. Now if you click again, it will always stay at the same position, BUT the color will continue to change. If this happens, it is because your JavaScript function created a new property each time they are used. Each time you call the ball.style.right = "0"; or ball.style.left = "0";, it adds to the CSS the properties:

#ball {
  /* The code you used:
       ...
   And then
  */
  right: 0;
  left: 0;
  right: 0;
  left: 0;
  /* etc */
}

This will take in consideration only the two first time you used these properties, so it stops at the first left. Then the ball stay at the left. What you need to do is each time you call these functions, you need to remove the CSS properties left and right. In JavaScript, you can use the method .removeProperty('name_property').

Example:

function startCal() {
  ball.style.right = "0";
  ball.style.removeProperty('left');
}

It is a bit long but did you understand?

8

Thanks, you fixed an issue, another issue is that the transition-duration doesn’t affect the transitions.

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.