首頁猿問如何在第二次單擊元素時&ldquo...

如何在第二次單擊元素時“反轉”CSS 轉換？

JavaScript

呼喚遠方 2022-09-02 10:38:16

我有一個簡單的CSS轉換/轉換切換開關。當我點擊一個類時，它會切換它。我想執行第二次轉換，當我再次單擊它時，它會“反轉”效果。但是，顯然它只是刪除了類。請運行我的代碼片段，看看我的意思。如何實現此目的？謝謝。.slider-click const slider = document.querySelector('.slider') const circle = document.querySelector('.slider-circle') slider.addEventListener('click', (e)=>{ circle.classList.toggle('slider-click'); }).slider { background-color: hsl(237, 63%, 64%); border-radius: 75px; width: 34vw; height: 21vw; display: flex; justify-content: flex-start; align-content: flex-start;}.slider:hover { opacity: 50%; cursor: pointer;}.slider-circle { height: 17.36vw; width: 17.36vw; border-radius: 50%; background-color: #ffffff; margin: 5%}.slider-click { transform: translateX(13vw); transition: .2s;}/* Something like this when clicked again */.slider-return { transform: translateX(-13vw); transition: .2s;} <div class="slider-content"> <div class="slider"> <div class="slider-circle"></div> </div> </div>

查看完整描述

4 回答

HUH函數

TA貢獻1836條經驗獲得超4個贊

在默認元素內部設置，而不是在它收到活動類后設置。transition: .2s;

// slider? It's more kindof a checkbox

const checkbox = document.querySelectorAll('.checkbox'); // use all! It's a class after all

const checboxToggle = (ev) => ev.currentTarget.classList.toggle('is-active');

checkbox.forEach(el => el.addEventListener('click', checboxToggle));

.checkbox {

background-color: hsl(237, 63%, 64%);

border-radius: 21vw;

width: 34vw;

height: 21vw;

display: flex;

justify-content: flex-start;

align-content: flex-start;

cursor: pointer;

}

.checkbox:before {

content: "";

height: 17.36vw;

width: 17.36vw;

border-radius: 50%;

background-color: #ffffff;

margin: 5%;

transition: .2s; /* USE IT HERE! */

}

.checkbox.is-active:before {

transform: translateX(13vw);

}

此外：

使用正確的措辭。沒有什么可以滑動的。它更像是一個復選框。
使用，因為你使用類！以及所有檢索到的元素。querySelectorAll.forEach()
你不需要任何內在的元素。使用或偽:before:after
將所需的類直接添加到主元素。.checkbox

反對回復 2022-09-02

四季花海

TA貢獻1811條經驗獲得超5個贊

首先使用復選框，然后使用和偽類。:before:after

不需要使用Javascript。

有關如何執行此操作的詳細信息，請參閱 w3schools。

反對回復 2022-09-02

函數式編程

TA貢獻1807條經驗獲得超9個贊

我想這就是你想要的，你只需添加一個點擊到圓圈的類，這將設置css translateX（13vw）并在再次點擊時將其重置為零。

const slider = document.querySelector('.slider')

const circle = document.querySelector('.slider-circle')

slider.addEventListener('click', (e)=>{

circle.classList.toggle('clicked');

})

.slider {

background-color: hsl(237, 63%, 64%);

border-radius: 75px;

width: 34vw;

height: 21vw;

display: flex;

justify-content: flex-start;

align-content: flex-start;

}

.slider:hover {

opacity: 50%;

cursor: pointer;

}

.slider-circle {

height: 17.36vw;

width: 17.36vw;

border-radius: 50%;

background-color: #ffffff;

margin: 5%;

transition: all .2s ease-out;

transform: translateX(0);

}

.clicked {

transform: translateX(13vw);

}

</div>

反對回復 2022-09-02

BIG陽

TA貢獻1859條經驗獲得超6個贊

const slider = document.querySelector('.slider')

const circle = document.querySelector('.slider-circle')

let toggled = false

slider.addEventListener('click', (e)=>{

if(toggled) {

circle.classList.remove('slider-click');

circle.classList.add('slider-return');

toggled = false;

} else {

circle.classList.remove('slider-return');

circle.classList.add('slider-click');

toggled = true;

}

})

.slider {

background-color: hsl(237, 63%, 64%);

border-radius: 75px;

width: 34vw;

height: 21vw;

display: flex;

justify-content: flex-start;

align-content: flex-start;

}

.slider:hover {

opacity: 50%;

cursor: pointer;

}

.slider-circle {

height: 17.36vw;

width: 17.36vw;

border-radius: 50%;

background-color: #ffffff;

margin: 5%

}

.slider-click {

transform: translateX(13vw);

transition: .2s;

}

/* Something like this when clicked again */

.slider-return {

transform: initial;

transition: .2s;

}

</div>

反對回復 2022-09-02

4 回答
0 關注
150 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在第二次單擊元素時“反轉”CSS 轉換？

如何在第二次單擊元素時“反轉”CSS 轉換？

4 回答

添加回答

如何在第二次單擊元素時“反轉”CSS 轉換？

如何在第二次單擊元素時“反轉”CSS 轉換？