How do I write an if expression for current transform: translate() value?How do you access the matched groups in a JavaScript regular expression?How do you use a variable in a regular expression?How can I get query string values in JavaScript?How to get the value from the GET parameters?How to write a:hover in inline CSS?How do I get the current date in JavaScript?Creating a two-column-100% layout with BootstrapCircle div in CSS doesn't show in canvas properlyCSS position:fixed is working for the header but not for the footerDo not scale element border
Can a tourist shoot a gun in the USA?
Is Germany still exporting arms to countries involved in Yemen?
Magento 2: How to get type columns of table in sql?
Why was Endgame Thanos so different than Infinity War Thanos?
What information do scammers need to withdraw money from an account?
Why are solar panels kept tilted?
Automatically anti-predictably assemble an alliterative aria
Is there any good reason to write "it is easy to see"?
Unexpected Netflix account registered to my Gmail address - any way it could be a hack attempt?
How does emacs `shell-mode` know to prompt for sudo?
using `is` operator with value type tuples gives error
Effects of ~10atm pressure on engine design
How do I tell my supervisor that he is choosing poor replacements for me while I am on maternity leave?
How exactly does artificial gravity work?
Wireless headphones interfere with Wi-Fi signal on laptop
Smallest Guaranteed hash collision cycle length
Program which behaves differently in/out of a debugger
How much Replacement does this axiom provide?
return tuple of uncopyable objects
How can I answer high-school writing prompts without sounding weird and fake?
Solubility in different pressure conditions
Is it possible to create different colors in rocket exhaust?
What's the difference between "за ... от" and "в ... от"?
What makes "quality" analog AV cables better than cheap cables?
How do I write an if expression for current transform: translate() value?
How do you access the matched groups in a JavaScript regular expression?How do you use a variable in a regular expression?How can I get query string values in JavaScript?How to get the value from the GET parameters?How to write a:hover in inline CSS?How do I get the current date in JavaScript?Creating a two-column-100% layout with BootstrapCircle div in CSS doesn't show in canvas properlyCSS position:fixed is working for the header but not for the footerDo not scale element border
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I'm trying to create my first switch.
I have 2 keyframe animations. One to make the switch move right and the other to move the switch left.
Now, for the Javascript I think I need an if statement because I need Javascript to know what to do when the switch is in specific positions right?
The problem is I'm not quite sure what to put as the if expression.
I was hoping I could just use this as the if expression to return a boolean true value:
sliderCircle[0].style.transform = 'translate(0px, -20px)'
HTML:
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
CSS:
.row
display: flex;
align-items: center;
justify-content: space-between;
width: 55vw;
height: auto;
padding: 0 1vw;
border-top: 2px solid rgba(255 ,255, 255, 0.4);
transition: 1s;
.slider
height: 12px;
margin-top: 2vw;
cursor: pointer;
.slider-back
width: 45px;
height: 12px;
border-radius: 15px;
background: -webkit-linear-gradient(100deg, rgba(172,174,203,0.6) 0%, rgba(255,255,255,0.6) 80%);
.slider-circle
width: 28px;
height: 28px;
border-radius: 25px;
background: -webkit-linear-gradient(100deg, rgba(172,174,203,1) 0%, rgba(255,255,255,1) 80%);
transform: translate(0, -20px);
.slide-anim-r
animation-name: slider-r;
animation-duration: 0.5s;
.slide-anim-l
animation-name: slider-l;
animation-duration: 0.5s;
@keyframes slider-r
0%
transform: translate(0, -20px);
100%
transform: translate(22px, -20px);
@keyframes slider-l
0%
transform: translate(22px, -20px);
100%
transform: translate(0, -20px);
Javascript:
const slider = document.getElementsByClassName('slider'); // slider toggle
const sliderCircle = document.getElementsByClassName('slider-circle');
slider[0].addEventListener('click', () =>
if (sliderCircle[0].style.transform = 'translate(0px, -20px)')
sliderCircle[0].classList.add('slide-anim-r');
sliderCircle[0].style.transform = 'translate(22px, -20px)';
else
sliderCircle[0].classList.add('slide-anim-l');
sliderCircle[0].style.transform = 'translate(0px, -20px)';
);
At the moment I can click on the switch and it animates right but then I can't click on it to move it back again.
If anyone can advise a better way to do this please let me know!
Thanks!
javascript css if-statement css-animations
asked Mar 23 at 13:36
MaximilianMaximilian
1329
add a comment |
I'm trying to create my first switch.
I have 2 keyframe animations. One to make the switch move right and the other to move the switch left.
Now, for the Javascript I think I need an if statement because I need Javascript to know what to do when the switch is in specific positions right?
The problem is I'm not quite sure what to put as the if expression.
I was hoping I could just use this as the if expression to return a boolean true value:
sliderCircle[0].style.transform = 'translate(0px, -20px)'
HTML:
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
CSS:
.row
display: flex;
align-items: center;
justify-content: space-between;
width: 55vw;
height: auto;
padding: 0 1vw;
border-top: 2px solid rgba(255 ,255, 255, 0.4);
transition: 1s;
.slider
height: 12px;
margin-top: 2vw;
cursor: pointer;
.slider-back
width: 45px;
height: 12px;
border-radius: 15px;
background: -webkit-linear-gradient(100deg, rgba(172,174,203,0.6) 0%, rgba(255,255,255,0.6) 80%);
.slider-circle
width: 28px;
height: 28px;
border-radius: 25px;
background: -webkit-linear-gradient(100deg, rgba(172,174,203,1) 0%, rgba(255,255,255,1) 80%);
transform: translate(0, -20px);
.slide-anim-r
animation-name: slider-r;
animation-duration: 0.5s;
.slide-anim-l
animation-name: slider-l;
animation-duration: 0.5s;
@keyframes slider-r
0%
transform: translate(0, -20px);
100%
transform: translate(22px, -20px);
@keyframes slider-l
0%
transform: translate(22px, -20px);
100%
transform: translate(0, -20px);
Javascript:
const slider = document.getElementsByClassName('slider'); // slider toggle
const sliderCircle = document.getElementsByClassName('slider-circle');
slider[0].addEventListener('click', () =>
if (sliderCircle[0].style.transform = 'translate(0px, -20px)')
sliderCircle[0].classList.add('slide-anim-r');
sliderCircle[0].style.transform = 'translate(22px, -20px)';
else
sliderCircle[0].classList.add('slide-anim-l');
sliderCircle[0].style.transform = 'translate(0px, -20px)';
);
At the moment I can click on the switch and it animates right but then I can't click on it to move it back again.
If anyone can advise a better way to do this please let me know!
Thanks!
javascript css if-statement css-animations
asked Mar 23 at 13:36
MaximilianMaximilian
1329
In your JavaScript if statements you are assigning with the = operator instead of testing for equality with ===. Try replacing = with === in the If clauses. I’m not entirely sure whether this will fix the issue however.
– Marcus
Mar 23 at 13:40
You don’t need an if statement at all. Just toggle the animation classes at the moment someone clicks the switch!classList.toggle()
– Kokodoko
Mar 23 at 13:44
@Kokodoko What would the syntax for toggle be here?
– Maximilian
Mar 23 at 14:38
add a comment |
I'm trying to create my first switch.
I have 2 keyframe animations. One to make the switch move right and the other to move the switch left.
Now, for the Javascript I think I need an if statement because I need Javascript to know what to do when the switch is in specific positions right?
The problem is I'm not quite sure what to put as the if expression.
I was hoping I could just use this as the if expression to return a boolean true value:
sliderCircle[0].style.transform = 'translate(0px, -20px)'
HTML:
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
CSS:
.row
display: flex;
align-items: center;
justify-content: space-between;
width: 55vw;
height: auto;
padding: 0 1vw;
border-top: 2px solid rgba(255 ,255, 255, 0.4);
transition: 1s;
.slider
height: 12px;
margin-top: 2vw;
cursor: pointer;
.slider-back
width: 45px;
height: 12px;
border-radius: 15px;
background: -webkit-linear-gradient(100deg, rgba(172,174,203,0.6) 0%, rgba(255,255,255,0.6) 80%);
.slider-circle
width: 28px;
height: 28px;
border-radius: 25px;
background: -webkit-linear-gradient(100deg, rgba(172,174,203,1) 0%, rgba(255,255,255,1) 80%);
transform: translate(0, -20px);
.slide-anim-r
animation-name: slider-r;
animation-duration: 0.5s;
.slide-anim-l
animation-name: slider-l;
animation-duration: 0.5s;
@keyframes slider-r
0%
transform: translate(0, -20px);
100%
transform: translate(22px, -20px);
@keyframes slider-l
0%
transform: translate(22px, -20px);
100%
transform: translate(0, -20px);
Javascript:
const slider = document.getElementsByClassName('slider'); // slider toggle
const sliderCircle = document.getElementsByClassName('slider-circle');
slider[0].addEventListener('click', () =>
if (sliderCircle[0].style.transform = 'translate(0px, -20px)')
sliderCircle[0].classList.add('slide-anim-r');
sliderCircle[0].style.transform = 'translate(22px, -20px)';
else
sliderCircle[0].classList.add('slide-anim-l');
sliderCircle[0].style.transform = 'translate(0px, -20px)';
);
At the moment I can click on the switch and it animates right but then I can't click on it to move it back again.
If anyone can advise a better way to do this please let me know!
Thanks!
javascript css if-statement css-animations
asked Mar 23 at 13:36
MaximilianMaximilian
1329
I'm trying to create my first switch.
I have 2 keyframe animations. One to make the switch move right and the other to move the switch left.
Now, for the Javascript I think I need an if statement because I need Javascript to know what to do when the switch is in specific positions right?
The problem is I'm not quite sure what to put as the if expression.
I was hoping I could just use this as the if expression to return a boolean true value:
sliderCircle[0].style.transform = 'translate(0px, -20px)'
HTML:
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
CSS:
.row
display: flex;
align-items: center;
justify-content: space-between;
width: 55vw;
height: auto;
padding: 0 1vw;
border-top: 2px solid rgba(255 ,255, 255, 0.4);
transition: 1s;
.slider
height: 12px;
margin-top: 2vw;
cursor: pointer;
.slider-back
width: 45px;
height: 12px;
border-radius: 15px;
background: -webkit-linear-gradient(100deg, rgba(172,174,203,0.6) 0%, rgba(255,255,255,0.6) 80%);
.slider-circle
width: 28px;
height: 28px;
border-radius: 25px;
background: -webkit-linear-gradient(100deg, rgba(172,174,203,1) 0%, rgba(255,255,255,1) 80%);
transform: translate(0, -20px);
.slide-anim-r
animation-name: slider-r;
animation-duration: 0.5s;
.slide-anim-l
animation-name: slider-l;
animation-duration: 0.5s;
@keyframes slider-r
0%
transform: translate(0, -20px);
100%
transform: translate(22px, -20px);
@keyframes slider-l
0%
transform: translate(22px, -20px);
100%
transform: translate(0, -20px);
Javascript:
const slider = document.getElementsByClassName('slider'); // slider toggle
const sliderCircle = document.getElementsByClassName('slider-circle');
slider[0].addEventListener('click', () =>
if (sliderCircle[0].style.transform = 'translate(0px, -20px)')
sliderCircle[0].classList.add('slide-anim-r');
sliderCircle[0].style.transform = 'translate(22px, -20px)';
else
sliderCircle[0].classList.add('slide-anim-l');
sliderCircle[0].style.transform = 'translate(0px, -20px)';
);
At the moment I can click on the switch and it animates right but then I can't click on it to move it back again.
If anyone can advise a better way to do this please let me know!
Thanks!
javascript css if-statement css-animations
javascript css if-statement css-animations
asked Mar 23 at 13:36
MaximilianMaximilian
1329
asked Mar 23 at 13:36
MaximilianMaximilian
1329
asked Mar 23 at 13:36
MaximilianMaximilian
1329
asked Mar 23 at 13:36
MaximilianMaximilian
1329
asked Mar 23 at 13:36
MaximilianMaximilian
1329
1329
In your JavaScript if statements you are assigning with the = operator instead of testing for equality with ===. Try replacing = with === in the If clauses. I’m not entirely sure whether this will fix the issue however.
– Marcus
Mar 23 at 13:40
You don’t need an if statement at all. Just toggle the animation classes at the moment someone clicks the switch!classList.toggle()
– Kokodoko
Mar 23 at 13:44
@Kokodoko What would the syntax for toggle be here?
– Maximilian
Mar 23 at 14:38
add a comment |
In your JavaScript if statements you are assigning with the = operator instead of testing for equality with ===. Try replacing = with === in the If clauses. I’m not entirely sure whether this will fix the issue however.
– Marcus
Mar 23 at 13:40
You don’t need an if statement at all. Just toggle the animation classes at the moment someone clicks the switch!classList.toggle()
– Kokodoko
Mar 23 at 13:44
@Kokodoko What would the syntax for toggle be here?
– Maximilian
Mar 23 at 14:38
In your JavaScript if statements you are assigning with the = operator instead of testing for equality with ===. Try replacing = with === in the If clauses. I’m not entirely sure whether this will fix the issue however.
– Marcus
Mar 23 at 13:40
In your JavaScript if statements you are assigning with the = operator instead of testing for equality with ===. Try replacing = with === in the If clauses. I’m not entirely sure whether this will fix the issue however.
– Marcus
Mar 23 at 13:40
You don’t need an if statement at all. Just toggle the animation classes at the moment someone clicks the switch!
classList.toggle()– Kokodoko
Mar 23 at 13:44
You don’t need an if statement at all. Just toggle the animation classes at the moment someone clicks the switch!
classList.toggle()– Kokodoko
Mar 23 at 13:44
@Kokodoko What would the syntax for toggle be here?
– Maximilian
Mar 23 at 14:38
@Kokodoko What would the syntax for toggle be here?
– Maximilian
Mar 23 at 14:38
add a comment |
1 Answer
1
active
oldest
votes
Since you only have two states and you want to go from one to the other, just use a transition instead of an animation.
It is much simple, and you only need one additional class to define the second state. (the first state being in the initial setup of the slider)
const sliders = document.querySelectorAll('.slider');
sliders.forEach(slider => slider.addEventListener('click', (e) =>
e.currentTarget
.querySelector('.slider-circle')
.classList
.toggle('slider-checked');
))body
background: #bada55
.row
display: flex;
align-items: center;
justify-content: space-between;
width: 55vw;
padding: 0 1vw;
border-top: 2px solid rgba(255, 255, 255, 0.4);
transition: 1s;
.slider
height: 12px;
margin-top: 2vw;
cursor: pointer;
.slider-back
width: 45px;
height: 12px;
border-radius: 15px;
background: linear-gradient(100deg, rgba(172, 174, 203, 0.6) 0%, rgba(255, 255, 255, 0.6) 80%);
.slider-circle
width: 28px;
height: 28px;
border-radius: 25px;
background: linear-gradient(100deg, rgba(172, 174, 203, 1) 0%, rgba(255, 255, 255, 1) 80%);
transition-duration: 0.5s;
transform: translate(0, -20px);
.slider-circle.slider-checked
transform: translate(22px, -20px);
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>answered Mar 23 at 14:25
Gabriele PetrioliGabriele Petrioli
153k23203262
This is great and I love that I can just repeat this code in html but I'd really like my animation to work rather than the switch snapping from left to right.
– Maximilian
Mar 23 at 14:50
@Maximilian just add webkit vendor specific prefix for the relevant css and it will transition between them not just snap.
– Gabriele Petrioli
Mar 23 at 15:02
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55314265%2fhow-do-i-write-an-if-expression-for-current-transform-translate-value%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Since you only have two states and you want to go from one to the other, just use a transition instead of an animation.
It is much simple, and you only need one additional class to define the second state. (the first state being in the initial setup of the slider)
const sliders = document.querySelectorAll('.slider');
sliders.forEach(slider => slider.addEventListener('click', (e) =>
e.currentTarget
.querySelector('.slider-circle')
.classList
.toggle('slider-checked');
))body
background: #bada55
.row
display: flex;
align-items: center;
justify-content: space-between;
width: 55vw;
padding: 0 1vw;
border-top: 2px solid rgba(255, 255, 255, 0.4);
transition: 1s;
.slider
height: 12px;
margin-top: 2vw;
cursor: pointer;
.slider-back
width: 45px;
height: 12px;
border-radius: 15px;
background: linear-gradient(100deg, rgba(172, 174, 203, 0.6) 0%, rgba(255, 255, 255, 0.6) 80%);
.slider-circle
width: 28px;
height: 28px;
border-radius: 25px;
background: linear-gradient(100deg, rgba(172, 174, 203, 1) 0%, rgba(255, 255, 255, 1) 80%);
transition-duration: 0.5s;
transform: translate(0, -20px);
.slider-circle.slider-checked
transform: translate(22px, -20px);
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>answered Mar 23 at 14:25
Gabriele PetrioliGabriele Petrioli
153k23203262
This is great and I love that I can just repeat this code in html but I'd really like my animation to work rather than the switch snapping from left to right.
– Maximilian
Mar 23 at 14:50
@Maximilian just add webkit vendor specific prefix for the relevant css and it will transition between them not just snap.
– Gabriele Petrioli
Mar 23 at 15:02
add a comment |
Since you only have two states and you want to go from one to the other, just use a transition instead of an animation.
It is much simple, and you only need one additional class to define the second state. (the first state being in the initial setup of the slider)
const sliders = document.querySelectorAll('.slider');
sliders.forEach(slider => slider.addEventListener('click', (e) =>
e.currentTarget
.querySelector('.slider-circle')
.classList
.toggle('slider-checked');
))body
background: #bada55
.row
display: flex;
align-items: center;
justify-content: space-between;
width: 55vw;
padding: 0 1vw;
border-top: 2px solid rgba(255, 255, 255, 0.4);
transition: 1s;
.slider
height: 12px;
margin-top: 2vw;
cursor: pointer;
.slider-back
width: 45px;
height: 12px;
border-radius: 15px;
background: linear-gradient(100deg, rgba(172, 174, 203, 0.6) 0%, rgba(255, 255, 255, 0.6) 80%);
.slider-circle
width: 28px;
height: 28px;
border-radius: 25px;
background: linear-gradient(100deg, rgba(172, 174, 203, 1) 0%, rgba(255, 255, 255, 1) 80%);
transition-duration: 0.5s;
transform: translate(0, -20px);
.slider-circle.slider-checked
transform: translate(22px, -20px);
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>answered Mar 23 at 14:25
Gabriele PetrioliGabriele Petrioli
153k23203262
This is great and I love that I can just repeat this code in html but I'd really like my animation to work rather than the switch snapping from left to right.
– Maximilian
Mar 23 at 14:50
@Maximilian just add webkit vendor specific prefix for the relevant css and it will transition between them not just snap.
– Gabriele Petrioli
Mar 23 at 15:02
add a comment |
Since you only have two states and you want to go from one to the other, just use a transition instead of an animation.
It is much simple, and you only need one additional class to define the second state. (the first state being in the initial setup of the slider)
const sliders = document.querySelectorAll('.slider');
sliders.forEach(slider => slider.addEventListener('click', (e) =>
e.currentTarget
.querySelector('.slider-circle')
.classList
.toggle('slider-checked');
))body
background: #bada55
.row
display: flex;
align-items: center;
justify-content: space-between;
width: 55vw;
padding: 0 1vw;
border-top: 2px solid rgba(255, 255, 255, 0.4);
transition: 1s;
.slider
height: 12px;
margin-top: 2vw;
cursor: pointer;
.slider-back
width: 45px;
height: 12px;
border-radius: 15px;
background: linear-gradient(100deg, rgba(172, 174, 203, 0.6) 0%, rgba(255, 255, 255, 0.6) 80%);
.slider-circle
width: 28px;
height: 28px;
border-radius: 25px;
background: linear-gradient(100deg, rgba(172, 174, 203, 1) 0%, rgba(255, 255, 255, 1) 80%);
transition-duration: 0.5s;
transform: translate(0, -20px);
.slider-circle.slider-checked
transform: translate(22px, -20px);
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>answered Mar 23 at 14:25
Gabriele PetrioliGabriele Petrioli
153k23203262
Since you only have two states and you want to go from one to the other, just use a transition instead of an animation.
It is much simple, and you only need one additional class to define the second state. (the first state being in the initial setup of the slider)
const sliders = document.querySelectorAll('.slider');
sliders.forEach(slider => slider.addEventListener('click', (e) =>
e.currentTarget
.querySelector('.slider-circle')
.classList
.toggle('slider-checked');
))body
background: #bada55
.row
display: flex;
align-items: center;
justify-content: space-between;
width: 55vw;
padding: 0 1vw;
border-top: 2px solid rgba(255, 255, 255, 0.4);
transition: 1s;
.slider
height: 12px;
margin-top: 2vw;
cursor: pointer;
.slider-back
width: 45px;
height: 12px;
border-radius: 15px;
background: linear-gradient(100deg, rgba(172, 174, 203, 0.6) 0%, rgba(255, 255, 255, 0.6) 80%);
.slider-circle
width: 28px;
height: 28px;
border-radius: 25px;
background: linear-gradient(100deg, rgba(172, 174, 203, 1) 0%, rgba(255, 255, 255, 1) 80%);
transition-duration: 0.5s;
transform: translate(0, -20px);
.slider-circle.slider-checked
transform: translate(22px, -20px);
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>const sliders = document.querySelectorAll('.slider');
sliders.forEach(slider => slider.addEventListener('click', (e) =>
e.currentTarget
.querySelector('.slider-circle')
.classList
.toggle('slider-checked');
))body
background: #bada55
.row
display: flex;
align-items: center;
justify-content: space-between;
width: 55vw;
padding: 0 1vw;
border-top: 2px solid rgba(255, 255, 255, 0.4);
transition: 1s;
.slider
height: 12px;
margin-top: 2vw;
cursor: pointer;
.slider-back
width: 45px;
height: 12px;
border-radius: 15px;
background: linear-gradient(100deg, rgba(172, 174, 203, 0.6) 0%, rgba(255, 255, 255, 0.6) 80%);
.slider-circle
width: 28px;
height: 28px;
border-radius: 25px;
background: linear-gradient(100deg, rgba(172, 174, 203, 1) 0%, rgba(255, 255, 255, 1) 80%);
transition-duration: 0.5s;
transform: translate(0, -20px);
.slider-circle.slider-checked
transform: translate(22px, -20px);
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>const sliders = document.querySelectorAll('.slider');
sliders.forEach(slider => slider.addEventListener('click', (e) =>
e.currentTarget
.querySelector('.slider-circle')
.classList
.toggle('slider-checked');
))body
background: #bada55
.row
display: flex;
align-items: center;
justify-content: space-between;
width: 55vw;
padding: 0 1vw;
border-top: 2px solid rgba(255, 255, 255, 0.4);
transition: 1s;
.slider
height: 12px;
margin-top: 2vw;
cursor: pointer;
.slider-back
width: 45px;
height: 12px;
border-radius: 15px;
background: linear-gradient(100deg, rgba(172, 174, 203, 0.6) 0%, rgba(255, 255, 255, 0.6) 80%);
.slider-circle
width: 28px;
height: 28px;
border-radius: 25px;
background: linear-gradient(100deg, rgba(172, 174, 203, 1) 0%, rgba(255, 255, 255, 1) 80%);
transition-duration: 0.5s;
transform: translate(0, -20px);
.slider-circle.slider-checked
transform: translate(22px, -20px);
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>
<div class="row">
<div class="slider">
<div class="slider-back"></div>
<div class="slider-circle"></div>
</div>
</div>answered Mar 23 at 14:25
Gabriele PetrioliGabriele Petrioli
153k23203262
answered Mar 23 at 14:25
Gabriele PetrioliGabriele Petrioli
153k23203262
answered Mar 23 at 14:25
Gabriele PetrioliGabriele Petrioli
153k23203262
answered Mar 23 at 14:25
Gabriele PetrioliGabriele Petrioli
153k23203262
153k23203262
This is great and I love that I can just repeat this code in html but I'd really like my animation to work rather than the switch snapping from left to right.
– Maximilian
Mar 23 at 14:50
@Maximilian just add webkit vendor specific prefix for the relevant css and it will transition between them not just snap.
– Gabriele Petrioli
Mar 23 at 15:02
add a comment |
This is great and I love that I can just repeat this code in html but I'd really like my animation to work rather than the switch snapping from left to right.
– Maximilian
Mar 23 at 14:50
@Maximilian just add webkit vendor specific prefix for the relevant css and it will transition between them not just snap.
– Gabriele Petrioli
Mar 23 at 15:02
This is great and I love that I can just repeat this code in html but I'd really like my animation to work rather than the switch snapping from left to right.
– Maximilian
Mar 23 at 14:50
This is great and I love that I can just repeat this code in html but I'd really like my animation to work rather than the switch snapping from left to right.
– Maximilian
Mar 23 at 14:50
@Maximilian just add webkit vendor specific prefix for the relevant css and it will transition between them not just snap.
– Gabriele Petrioli
Mar 23 at 15:02
@Maximilian just add webkit vendor specific prefix for the relevant css and it will transition between them not just snap.
– Gabriele Petrioli
Mar 23 at 15:02
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55314265%2fhow-do-i-write-an-if-expression-for-current-transform-translate-value%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
In your JavaScript if statements you are assigning with the = operator instead of testing for equality with ===. Try replacing = with === in the If clauses. I’m not entirely sure whether this will fix the issue however.
– Marcus
Mar 23 at 13:40
You don’t need an if statement at all. Just toggle the animation classes at the moment someone clicks the switch!
classList.toggle()– Kokodoko
Mar 23 at 13:44
@Kokodoko What would the syntax for toggle be here?
– Maximilian
Mar 23 at 14:38