时间戳

首页 > 解决方案 > 如何在使用：active 类为 tanslateX() 属性设置动画时使按钮可点击？

html - 如何在使用：active 类为 tanslateX() 属性设置动画时使按钮可点击？

问题描述

我有一个按钮，我想制作动画并在单击时使其向右移动。再次单击时，它应该返回预览位置。

问题是单击没有注册，并且随着translateX值的增加（例如：-80px），按钮变得更不可点击，并且translateX(-10px)按钮是可点击的，但我想翻译更多。

如何使按钮可点击并以更高的价值翻译它，例如translateX(-60px). （此处可点击意味着事件是使用 'on-click' 事件在 javascript 中捕获的）

.button{
    width:20px;
    height:20px;
    z-index: 1;
    display: inline-block;
    position: absolute;
    left:10px;
    background-color: white;
    color: rgba(255, 255, 255, 0);
    border-radius: 2px;
    box-shadow: 2px 2px 4px black;
    padding:4px;
    cursor: pointer;
    user-select: none;
    background-image:url('../public/icons/left.svg');
    background-repeat: no-repeat;
    background-position:center;
    transition: transform .6s;
    &:hover{
        background-color: rgb(236, 236, 236);
    }
    &:active {
        box-shadow:none;
        // when button is clicked it should feel like button moved left,like in slider left button 
        // goes to right and comes back when clicked
        transform: translateX(-40px);
    }
}
<i class="button">Next</i>

标签： htmlcss

解决方案

很抱歉重写了代码。你想要这样的东西吗？

$("div").click(function(){
        $(this).toggleClass("move");        
});
div{
    padding:10px;
    text-align:center;
    width:33px;
    position:relative;
    color:white;
    cursor:pointer;
    background-color: red;
    transition: transform .6s;
}
.move{
  transform: translateX(100px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>click me</div>

推荐阅读