第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

如何在第二次單擊元素時(shí)“反轉(zhuǎn)”CSS 轉(zhuǎn)換？

如何在第二次單擊元素時(shí)“反轉(zhuǎn)”CSS 轉(zhuǎn)換？

呼喚遠(yuǎn)方 2022-09-02 10:38:16
我有一個(gè)簡單的CSS轉(zhuǎn)換/轉(zhuǎn)換切換開關(guān)。當(dāng)我點(diǎn)擊一個(gè)類時(shí)，它會(huì)切換它。我想執(zhí)行第二次轉(zhuǎn)換，當(dāng)我再次單擊它時(shí)，它會(huì)“反轉(zhuǎn)”效果。但是，顯然它只是刪除了類。請運(yùn)行我的代碼片段，看看我的意思。如何實(shí)現(xiàn)此目的？謝謝。.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函數(shù)

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超4個(gè)贊

在默認(rèn)元素內(nèi)部設(shè)置，而不是在它收到活動(dòng)類后設(shè)置。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);

}

<div class="checkbox"></div>

此外：

  • 使用正確的措辭。沒有什么可以滑動(dòng)的。它更像是一個(gè)復(fù)選框。

  • 使用，因?yàn)槟闶褂妙?！以及所有檢索到的元素。querySelectorAll.forEach()

  • 你不需要任何內(nèi)在的元素。使用 或 偽:before:after

  • 將所需的類直接添加到主元素。.checkbox


查看完整回答
反對 回復(fù) 2022-09-02
?
四季花海

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超5個(gè)贊

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

不需要使用Javascript。

有關(guān)如何執(zhí)行此操作的詳細(xì)信息，請參閱 w3schools。


查看完整回答
反對 回復(fù) 2022-09-02
?
函數(shù)式編程

TA貢獻(xiàn)1807條經(jīng)驗(yàn) 獲得超9個(gè)贊

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


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);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slider-content">

  <div class="slider">

      <div class="slider-circle"></div>

  </div>

</div>


查看完整回答
反對 回復(fù) 2022-09-02
?
BIG陽

TA貢獻(xiàn)1859條經(jīng)驗(yàn) 獲得超6個(gè)贊

      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 class="slider-content">

            <div class="slider">

                <div class="slider-circle"></div>

            </div>

          </div>


查看完整回答
反對 回復(fù) 2022-09-02
  • 4 回答
  • 0 關(guān)注
  • 147 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)