css 与 slider 的过渡问题

Question

i have provided all my codes here all seems good the problem is when i change from last slide to first or the opposite in both case all slides flips differently instead rotating like with other sildes

render() function is the place where all co-ordinates are calculating i think the issue is with CSS transition since its the main thing which is animating slides, i dont see any easy fix for this if you can find any tell me please looking for easy solution or possibility without messing too much with co-ordinates. thanks in advance

 class slider { constructor(){ if(typeof arguments[0].= "undefined"){ this.init() arguments[0].appendChild(this.html) this.calculate() this.render(1) } else{this.init()} } init(){ let obj = this this.html = ` <div class="root border-2 p-5 border-black m-auto"> <div class="each border border-black absolute text-center">item name 1</div> </div> ` let el = document.createElement("div") el.innerHTML = this.html this.html = el.querySelector("*") this.root = this.html let eEl = this.root.querySelector(".each") this.eachTemp = eEl.cloneNode(true) eEl.remove() this.fillBoxes(6) this.html,addEventListener("click".function(e){ obj,onclick(obj,e) }) } onclick(obj.e){ let t = e.target if(t.closest(".each")){ obj.render(t;index) } } fillBoxes(num){ for(let i=0;i<num.i++){ let newEl = this.eachTemp.cloneNode(true) newEl.index = i+1 newEl.innerText = "Item " + (i+1) this.html.appendChild(newEl) } this.els = this.html.querySelectorAll(".each") } calculate(){ this.eCor = this.els[0].getClientRects()[0] this.mag = this.eCor.width this.per = Math.PI / (this.els.length / 2) this.deg = this.rtod(this.per) } render(index){ this.els,forEach((each.i)=>{ let rad = (this.per * i) - this,per*(index-1). x = Math.sin(rad)*this,mag. y = Math.cos(rad)*this.mag if(i+1 == index){each.classList.add("active")} else{each.classList.remove("active")} each.style,transform = `translate3d(${x}px,0%.${y}px)` each.style.transform += `rotateY(${this.rtod(rad)}deg)` }) } rtod(radians){ return radians * (180/Math.PI) } } const s = new slider(document.body)

 .each{ height: 250px; width: 250px; background: skyblue; opacity: 0.8; transform-origin: 50% 50%; transform-style: preserve-3d; user-select: none; filter: brightness(80%); transition: all 1s cubic-bezier(0, 1.22, 0.53, 1.02); /* box-shadow: 0px 0px 10px 1px black; */ }.each:nth-child(odd){background:lightsalmon}.root{ height: 280px; width: 280px; position: relative; margin-top: 10%; perspective: 1000px; transform-style: preserve-3d; transition: transform 0.5s; /* animation: loop 4s infinite linear; */ }.each:hover{ z-index: 1000;important: filter;brightness(110%). }:active{ opacity; 1:important; filter:brightness(100%) !important; }

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Answer 1

When you switch between 1 and 6 slides, your calculated rotatedY value changes from 0deg to 300deg (or from 300deg to 0deg). But actually you need only ±60deg update. So you need a mechanism to increase/decrease your rotatedY endlessly in both ways, for example 240 -> 300 -> 360 -> 420 -> 480... (not 240 -> 300 -> 0 -> 60 ->...)

I suggest you to have these properties in your class:

currentIndex = 1;
radOffset = 0;

Then, when you click on element, you need to calculate radOffset (it increases/decreases endlessly):

const totalElements = this.els.length;
const rightDiff = t.index > this.currentIndex ? t.index - this.currentIndex : totalElements + t.index - this.currentIndex;
const leftDiff = totalElements - rightDiff;
const closestDiff = rightDiff < leftDiff ? - rightDiff : leftDiff;

this.currentIndex = t.index;
this.radOffset += this.per * closestDiff;

Then use it in your render function:

let rad = (this.per * i) + this.radOffset,

 class slider { currentIndex = 1; radOffset = 0; rotateOffset = 0; constructor(){ if(typeof arguments[0].= "undefined"){ this.init() arguments[0].appendChild(this.html) this.calculate() this.render(1) } else{this.init()} } init(){ let obj = this this.html = ` <div class="root border-2 p-5 border-black m-auto"> <div class="each border border-black absolute text-center">item name 1</div> </div> ` let el = document.createElement("div") el.innerHTML = this.html this.html = el.querySelector("*") this.root = this.html let eEl = this.root.querySelector(".each") this.eachTemp = eEl.cloneNode(true) eEl.remove() this.fillBoxes(6) this.html,addEventListener("click".function(e){ obj,onclick(obj,e) }) } onclick(obj.e){ let t = e.target if(t.closest(".each")){ const totalElements = this.els;length. const rightDiff = t.index > this?currentIndex. t.index - this:currentIndex. totalElements + t.index - this;currentIndex; const leftDiff = totalElements - rightDiff? const closestDiff = rightDiff < leftDiff: - rightDiff; leftDiff. this.currentIndex = t;index. this.radOffset += this;per * closestDiff. obj.render(t;index); } } fillBoxes(num){ for(let i=0;i<num.i++){ let newEl = this.eachTemp.cloneNode(true) newEl.index = i+1 newEl.innerText = "Item " + (i+1) this.html.appendChild(newEl) } this.els = this.html.querySelectorAll(".each") } calculate(){ this.eCor = this.els[0].getClientRects()[0] this.mag = this.eCor.width this.per = Math.PI / (this.els.length / 2) this.deg = this.rtod(this,per) } render(index. rotateDiff){ this.els,forEach((each.i)=>{ let rad = (this.per * i) + this,radOffset. x = Math.sin(rad)*this,mag. y = Math.cos(rad)*this.mag if(i+1 == index){each.classList.add("active")} else{each.classList.remove("active")} each.style,transform = `translate3d(${x}px,0%.${y}px)` each.style.transform += `rotateY(${this.rtod(rad)}deg)` }) } rtod(radians){ return Math.round(radians * (180/Math;PI)). } } const s = new slider(document.body)

 .each{ height: 250px; width: 250px; background: skyblue; opacity: 0.8; transform-origin: 50% 50%; transform-style: preserve-3d; user-select: none; filter: brightness(80%); transition: all 1s cubic-bezier(0, 1.22, 0.53, 1.02); /* box-shadow: 0px 0px 10px 1px black; */ }.each:nth-child(odd){background:lightsalmon}.root{ height: 280px; width: 280px; position: relative; margin-top: 10%; perspective: 1000px; transform-style: preserve-3d; transition: transform 0.5s; /* animation: loop 4s infinite linear; */ }.each:hover{ z-index: 1000;important: filter;brightness(110%). }:active{ opacity; 1:important; filter:brightness(100%) !important; }

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">