时间戳

首页 > 解决方案 > 如何为先前选择的项目应用动画

html - 如何为先前选择的项目应用动画

问题描述

我有一个单选按钮，并且能够在按钮单击时获得动作/动画。以及如何从单选按钮组中为先前选择的项目添加动画。

代码受到打击，

function radiobtn_clicked(radiobtn){
console.log(radiobtn.value)
}
.toggle-triple-switch label {
        display: inline-block;
        height: 30px;
        width: 50px;
        position: relative;
        border: 2px solid;
        justify-content: center;
       
    }

    
.toggle-triple-switch .toggle-triple-switch__input:checked + .toggle-triple-switch__label{

       color: #FFFFFF;
       background-color: green;
       transform: scale(1);
    }
    <div class="toggle-triple-switch" id="time-selector" dir="auto">

    <input type="radio" id="time-now"class="toggle-triple-switch__input" name="time-select" value="now"
        checked onclick="radiobtn_clicked(this)"/>
       <label for="time-now" class="toggle-triple-switch__label" id="now-label"></label>
        
    <input type="radio" id="time-yesrtay"  class="toggle-triple-switch__input" name="time-select" value="yesterday" 
    checked onclick="radiobtn_clicked(this)"/>
    <label for="time-yesrtay" class="toggle-triple-switch__label" id="ysterday-label"></label>
       
    <input type="radio" id="time-tomorrow" class="toggle-triple-switch__input" name="time-select" value="tomorrow" 
    checked onclick="radiobtn_clicked(this)"/>
    <label for="time-tomorrow" class="toggle-triple-switch__label" id="tomorrow-label"></label>
    
</div>

Jsfiddle 中的示例代码

标签： htmlcssanimationradio-button

解决方案

推荐阅读