複選框必須點擊兩次以執行動畫

我創建了一個自定義動畫複選框，看起來像一個開關。我使用類名來修改我的複選框的動畫。這裏是我的代碼：複選框必須點擊兩次以執行動畫

HTML

<label> 
    <input class="cb" type="checkbox"> 
    <div class="ball"></div> <!-- don't mind this --> 
</label>

的Javascript

var $ = document.querySelector.bind(document); 

$('label').onclick = function() { 
    if(!$('.cb').checked) { 
     this.classList.add('clicked'); 
    } else { 
     this.classList.remove('clicked'); 
    } 
}

它成功地工作，但不是完美的，因爲在複選框的初始點擊（頁面加載之後的意思），你必須點擊兩次才能執行第一個動畫。我試過event.stopPropagation()但它仍然是一樣的。我也試過event.preventDefault()，但它只適用於第一個動畫。

來源

2016-12-03 jst16

嗨，請嘗試更改，如果條件$（'。cb'）。檢查刪除'！'。 – Ninjaneer

[元素] .checked將在檢查輸入後立即爲真。 – Ninjaneer

@RohithKP'$（this）'將引用文檔。 – SLePort

我會聽取更改事件，而不是標籤的單擊事件 - 您可能正面臨競爭狀況。

我的HTML看起來像這樣：

<label> 
    <input id="toggles-animation" type="checkbox"> 

    <span class="animate"> 
    Select me 
    </span> 
</label>

複選框有toggles-animation的ID，這是我們聽的變化的元素。

裏面的元素上面有animate類 - 它將是一個動畫。該元素是我們需要添加clicked類的元素，因此它具有和clicked和animate。

我們可以通過添加onchange聽衆的複選框輸入做到這一點：

var $ = document.querySelector.bind(document); 
var el = $('#toggles-animation'); 

el.onchange = function (evt) { 
    var animateElement = this.nextSibling.nextSibling; 
    var toggle = this.checked ? 'add' : 'remove'; 

    animateElement.classList[toggle]('clicked'); 
};

您可以查詢animateElement任何你喜歡的，我只是用同級元素的方式。重要的是有一個具有動畫的類，該類不會被刪除或添加，而是一個補充類。

所以，當檢查：<span class="animate clicked">

我創建在後臺啓動綠松石和動畫粉紅色的演示。你可以看到在Codepen上的工作演示：http://codepen.io/tinacious/pen/WoMoZo

來源

2016-12-03 07:03:48 Tina

已經解決了這個問題。 '！'是問題 – jst16

複選框必須點擊兩次以執行動畫

回答

相關問題