Question

我正在构建一个简单的reactJs应用程序，其中有三个用于“今天”，“明天”和“下一个”的嵌入式无线电输入。其中两个始终不在屏幕上。参见：https://gyazo.com/08ed62398c1001ea677bd79b500466c5

我正在尝试创建一个动画，在其中单击“明天”，然后输入的容器div侧向滑动以显示“明天”和“下一步”。到目前为止，我得到了：https://gyazo.com/004dd81e1f4aa0e3fb375e815e8d8237

我不确定该怎么做：

                <input type="radio" name="day-options" onClick={() => this.animate(3)} onChange={this.changeDate} id="third-option-day" />
                <label for="third-option-day"> Next</label>

动画功能

  animate(val){
    var el = document.getElementById('btn-container');

    switch(val){

        case 3:
        el.className += ' animate-right3';
        break;
    }
}

css

.animate-right3{
    animation: animateright3 .6s ease-in;
}


@keyframes animateright3{
    0%{
        transform: translateX(-200px);
    }
    100%{
        transform: translateX(-500px);
    }
}

很显然，不应该这样做。您能否给出一些指导，以便在单击输入时容器div来回移动？

动画无线电输入横向Reactjs

0 个答案: