admin管理员组

文章数量:1403343

I need help with my CSS and javascript code which I have uploaded to codepen.

I am trying to use CSS motion path, I would like to be able to control this with JavaScript, so when you press the "Forward button" it runs to the last keyframe and that works, But when I press the "Back button" then nothing happens. I will like it to move back to the first keyframe.

The question if I am on the right track with my code? and what I need to change?

function myForwardFunction() {
  document.getElementById("pathed").style.animationPlayState = "running";
}

function myBackFunction() {
  document.getElementById("pathed").style.animationDirection = "reverse";
}
section {
  width: 244px;
  height: 200px;
  border: 2px dashed lightgrey;
}

body {
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  gap: 30px;
  margin: 0;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

div {
  width: 50px;
  height: 50px;
  border: 1px solid hsl(343, 100%, 58%, .3);
  border-right: 5px solid hsl(343, 100%, 58%);
  background: hsla(343, 100%, 58%, .3) radial-gradient(circle, hsl(343, 100%, 58%, 1) 3px, hsl(343, 100%, 58%, 0) 3px);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: monospace, sans-serif;
}

.pathed {
  offset-path: path('M0,0 C40,240 200,240 240,0');
  position: absolute;
  animation: distance 4000ms alternate ease-in-out;
  animation-play-state: paused;
  animation-fill-mode: both;
  animation-direction: normal;
}

@keyframes distance {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

code {
  position: absolute;
  top: 100px;
  right: 10px;
  left: 10px;
  line-height: 1.5;
}

section {
  position: relative;
}

* {
  box-sizing: border-box;
}

svg {
  position: absolute;
  opacity: .333;
  stroke-width: 2px;
}
<button onclick="myForwardFunction()">Forward</button>

<button onclick="myBackFunction()">Back</button>


<section>
  <svg viewBox="0 0 240 200"><path d="M0,0 C40,240 200,240 240,0" fill="none" stroke="lightgrey"/></svg>
  <div id="pathed" class="pathed"></div>
</section>

I need help with my CSS and javascript code which I have uploaded to codepen.

I am trying to use CSS motion path, I would like to be able to control this with JavaScript, so when you press the "Forward button" it runs to the last keyframe and that works, But when I press the "Back button" then nothing happens. I will like it to move back to the first keyframe.

The question if I am on the right track with my code? and what I need to change?

function myForwardFunction() {
  document.getElementById("pathed").style.animationPlayState = "running";
}

function myBackFunction() {
  document.getElementById("pathed").style.animationDirection = "reverse";
}
section {
  width: 244px;
  height: 200px;
  border: 2px dashed lightgrey;
}

body {
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  gap: 30px;
  margin: 0;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

div {
  width: 50px;
  height: 50px;
  border: 1px solid hsl(343, 100%, 58%, .3);
  border-right: 5px solid hsl(343, 100%, 58%);
  background: hsla(343, 100%, 58%, .3) radial-gradient(circle, hsl(343, 100%, 58%, 1) 3px, hsl(343, 100%, 58%, 0) 3px);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: monospace, sans-serif;
}

.pathed {
  offset-path: path('M0,0 C40,240 200,240 240,0');
  position: absolute;
  animation: distance 4000ms alternate ease-in-out;
  animation-play-state: paused;
  animation-fill-mode: both;
  animation-direction: normal;
}

@keyframes distance {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

code {
  position: absolute;
  top: 100px;
  right: 10px;
  left: 10px;
  line-height: 1.5;
}

section {
  position: relative;
}

* {
  box-sizing: border-box;
}

svg {
  position: absolute;
  opacity: .333;
  stroke-width: 2px;
}
<button onclick="myForwardFunction()">Forward</button>

<button onclick="myBackFunction()">Back</button>


<section>
  <svg viewBox="0 0 240 200"><path d="M0,0 C40,240 200,240 240,0" fill="none" stroke="lightgrey"/></svg>
  <div id="pathed" class="pathed"></div>
</section>

  • javascript
  • html
  • css
Share Improve this question edited Oct 9, 2020 at 10:40 Sarun UK 6,7667 gold badges26 silver badges50 bronze badges asked Oct 9, 2020 at 10:27 user10238568user10238568 955 bronze badges 4
  • I think you've forgotten to post your codepen – Eddie Reeder Commented Oct 9, 2020 at 10:28
  • codepen.io/karsten-dall-s-rensen/pen/wvWvJgK – user10238568 Commented Oct 9, 2020 at 10:30
  • any error in the console ? – Aahad Commented Oct 9, 2020 at 10:35
  • no Error in the console – user10238568 Commented Oct 9, 2020 at 10:39
Add a ment  | 

4 Answers 4

Reset to default 5

You may also toggle a class and use a transition:

function myForwardFunction() {
  document.getElementById("pathed").classList.add('to100');
}
function myBackFunction() {
  document.getElementById("pathed").classList.toggle('to100');
}
section {
  width: 244px;
  height: 200px;
  border: 2px dashed lightgrey;
}

body {
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  gap: 30px;
  margin: 0;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

div {
  width: 50px;
  height: 50px;
  border: 1px solid hsl(343, 100%, 58%, .3);
  border-right: 5px solid hsl(343, 100%, 58%);
  background: hsla(343, 100%, 58%, .3) radial-gradient(circle, hsl(343, 100%, 58%, 1) 3px, hsl(343, 100%, 58%, 0) 3px);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: monospace, sans-serif;
}

.pathed {
  offset-path: path('M0,0 C40,240 200,240 240,0');
  position: absolute;
  transition: 4s;
  offset-distance: 0%;
}

.pathed.to100 {
  offset-distance: 100%;
}

code {
  position: absolute;
  top: 100px;
  right: 10px;
  left: 10px;
  line-height: 1.5;
}

section {
  position: relative;
}

* {
  box-sizing: border-box;
}

svg {
  position: absolute;
  opacity: .333;
  stroke-width: 2px;
}
small {font-size:0.6em}
<button onclick="myForwardFunction()">Forward</button>
<button onclick="myBackFunction()">Back<small>/toggle direction</small></button>


<section>
  <svg viewBox="0 0 240 200"><path d="M0,0 C40,240 200,240 240,0" fill="none" stroke="lightgrey"/></svg>
  <div id="pathed" class="pathed"></div>
</section>

edit as suggested by @wizzwizz4 ment , you can use your js to set the onclick function on your button:

let btn = document.querySelector('#click');
let div = document.querySelector('#pathed');
btn.addEventListener("click", function() {
  this.classList.toggle('to100');
  div.classList.toggle('to100');
});
section {
  width: 244px;
  height: 200px;
  border: 2px dashed lightgrey;
}

body {
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  gap: 30px;
  margin: 0;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

div {
  width: 50px;
  height: 50px;
  border: 1px solid hsl(343, 100%, 58%, .3);
  border-right: 5px solid hsl(343, 100%, 58%);
  background: hsla(343, 100%, 58%, .3) radial-gradient(circle, hsl(343, 100%, 58%, 1) 3px, hsl(343, 100%, 58%, 0) 3px);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: monospace, sans-serif;
}

.pathed {
  offset-path: path('M0,0 C40,240 200,240 240,0');
  position: absolute;
  transition: 4s;
  offset-distance: 0%;
}

.pathed.to100 {
  offset-distance: 100%;
}

#click:after {
  content: ' forwards';
}

#click.to100:after {
  content: ' backwards';
}

code {
  position: absolute;
  top: 100px;
  right: 10px;
  left: 10px;
  line-height: 1.5;
}

section {
  position: relative;
}

* {
  box-sizing: border-box;
}

svg {
  position: absolute;
  opacity: .333;
  stroke-width: 2px;
}

small {
  font-size: 0.6em
}
<button id=click>Click to go</button>


<section>
  <svg viewBox="0 0 240 200"><path d="M0,0 C40,240 200,240 240,0" fill="none" stroke="lightgrey"/></svg>
  <div id="pathed" class="pathed"></div>
</section>

Try this

Updated

css

.pathed {
  offset-path: path('M0,0 C40,240 200,240 240,0');
  position: absolute;
  animation-play-state: paused;
  animation-direction: normal;

}
@keyframes distance_1 {
  from {
    offset-distance: 0%;
  }
  to{  offset-distance: 100%;}
}

@keyframes distance_2 {
  from {
    offset-distance: 100%;
  }
  to{  offset-distance: 0%;}
}

js

 function myForwardFunction() {
      document.getElementById("pathed").style.animation = "distance_1 4000ms alternate ease-in-out";
      document.getElementById("pathed").style.animationDirection = "running";
      document.getElementById("pathed").style.animationFillMode = "forwards";
    }

    function myBackFunction() {
      document.getElementById("pathed").style.animation = "distance_2 4000ms alternate ease-in-out";
      document.getElementById("pathed").style.animationDirection = "running";
      document.getElementById("pathed").style.animationFillMode = "backwards";
    }

working example

The reason it doesn't work is because by default css animation only play for one time. This can be controlled by animation-iteration-count property, and its initial value is set to 1 by default.

So even when you reverse the animation direction by pressing "back" button, the animation has already been played one time, so it's ended. Thus you see no effect.

For your use case you need to reset the internal state of css animation. This can be done by setting element.style.animation = 'none' then unset it element.style.animation = ''. But there's a trick here, you cannot simply write JS like:

element.style.animation = 'none';
element.style.animation = '';

This will not work. According to https://css-tricks./restart-css-animation/, you have two options to cast the magic spell.

  1. setTimeout()
element.style.animation = 'none';
setTimeout(() => {
  element.style.animation = '';
})
  1. void pathed.offsetWidth;
element.style.animation = 'none';
// magic: accessing `.offsetWidth` triggers a reflow
void pathed.offsetWidth;
element.style.animation = '';

I like the second option cus it looks more elegant. So you just need to change your JS to:

const pathed = document.getElementById("pathed");

function myForwardFunction() {
  pathed.style.animation = 'none';
  void pathed.offsetWidth;
  pathed.style.animation = '';
  pathed.style.animationDirection = "normal";
  pathed.style.animationPlayState = "running";
}

function myBackFunction() {
  pathed.style.animation = 'none';
  void pathed.offsetWidth;
  pathed.style.animation = '';
  pathed.style.animationDirection = "reverse";
  pathed.style.animationPlayState = "running";
}

Expand to see full solution:

const pathed = document.getElementById("pathed");
function myForwardFunction() {
  pathed.style.animation = 'none';
  void pathed.offsetWidth;
  pathed.style.animation = '';
  pathed.style.animationDirection = "normal";
  pathed.style.animationPlayState = "running";
}

function myBackFunction() {
  pathed.style.animation = 'none';
  void pathed.offsetWidth;
  pathed.style.animation = '';
  pathed.style.animationDirection = "reverse";
  pathed.style.animationPlayState = "running";
}
section {
  width: 244px;
  height: 200px;
  border: 2px dashed lightgrey;
}

body {
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  gap: 30px;
  margin: 0;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

div {
  width: 50px;
  height: 50px;
  border: 1px solid hsl(343, 100%, 58%, .3);
  border-right: 5px solid hsl(343, 100%, 58%);
  background: hsla(343, 100%, 58%, .3) radial-gradient(circle, hsl(343, 100%, 58%, 1) 3px, hsl(343, 100%, 58%, 0) 3px);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: monospace, sans-serif;
}

.pathed {
  offset-path: path('M0,0 C40,240 200,240 240,0');
  position: absolute;
  animation: distance 1000ms alternate ease-in-out;
  animation-play-state: paused;
  animation-fill-mode: both;
  animation-direction: normal;
}

@keyframes distance {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

code {
  position: absolute;
  top: 100px;
  right: 10px;
  left: 10px;
  line-height: 1.5;
}

section {
  position: relative;
}

* {
  box-sizing: border-box;
}

svg {
  position: absolute;
  opacity: .333;
  stroke-width: 2px;
}
<button onclick="myForwardFunction()">Forward</button>

<button onclick="myBackFunction()">Back</button>


<section>
  <svg viewBox="0 0 240 200"><path d="M0,0 C40,240 200,240 240,0" fill="none" stroke="lightgrey"/></svg>
  <div id="pathed" class="pathed"></div>
</section>

Expanding on G-cyrillus's answer but using pure CSS:

input {
  opacity: 0;
  position: absolute;
}

label {
  background: lightblue;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  left: -170px;
  top: 80px;
}

section {
  width: 244px;
  height: 200px;
  border: 2px dashed lightgrey;
}

body {
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  gap: 30px;
  margin: 0;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

div {
  width: 50px;
  height: 50px;
  border: 1px solid hsl(343, 100%, 58%, .3);
  border-right: 5px solid hsl(343, 100%, 58%);
  background: hsla(343, 100%, 58%, .3) radial-gradient(circle, hsl(343, 100%, 58%, 1) 3px, hsl(343, 100%, 58%, 0) 3px);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: monospace, sans-serif;
}

.pathed {
  offset-path: path('M0,0 C40,240 200,240 240,0');
  position: absolute;
  transition: 4s;
}

#back:checked ~ .pathed {
  offset-distance: 0%;
}

#forward:checked ~ .pathed {
  offset-distance: 100%;
}

section {
  position: relative;
}

* {
  box-sizing: border-box;
}

svg {
  position: absolute;
  opacity: .333;
  stroke-width: 2px;
  left: 0;
  top: 17px;
}
<section>
  <input type="radio" id="forward" name="toggle">
  <label for="forward">Forwards</label>

  <input type="radio" id="back" name="toggle">
  <label for="back">Back</label>
  
  <svg viewBox="0 0 240 200"><path d="M0,0 C40,240 200,240 240,0" fill="none" stroke="lightgrey"/></svg>
  <div id="pathed" class="pathed"></div>
</section>

本文标签： javascriptCSS motion path onClickStack Overflow

版权声明：本文标题：javascript - CSS motion path onClick - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744410959a2604948.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。