如何在一个js事件中启用和禁用css转换？

时间：2017-08-02 09:14:51

标签： jquery css html5

我无法重新定位有时应该有过渡的元素，有时不会。

这些操作可以很好地隔离，但视图似乎不会在组合操作的中途更新。解决方案是什么？

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('#goLeft').on('click',function() {
    $('#box').removeClass('soft');
    $('#box').css('left','300px');
  });
  $('#goRight').on('click',function() {
    $('#box').addClass('soft');
    $('#box').css('left','400px');
  });
  $('#goLeftAndRight').on('click',function() {
    //copy
    $('#box').removeClass('soft');
    $('#box').css('left','300px');
    //Need for timeout?
    //copy
    $('#box').addClass('soft');
    $('#box').css('left','400px');    
  });
});
＆＃13; 
h2 {
  cursor:pointer;
}

#box {
  position: fixed;
  top:100px;
  left:400px;
  height:100px;
  width:100px;
  background-color:#358;
}

#box p {
  padding:5px;
  color:#fff;
  text-align:center;
}

.soft {
  transition: all 0.3s ease-out;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <h2 id="goLeft">jump left</h2>
    <h2 id="goRight">slide right</h2>
    <h2 id="goLeftAndRight">jump left and slide right</h2>
    <div id="box"><p>use headers to move</div>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

7 个答案:

答案 0 :(得分：2)

有两种方法可以做到 -

1＃ - 将您的功能与 CSS animation

结合使用

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('#goLeft').on('click', function() {
    $('#box').removeClass('soft left-right');
    $('#box').css('left', '300px');
  });
  $('#goRight').on('click', function() {
    $('#box').addClass('soft').removeClass('left-right');
    $('#box').css('left', '400px');
  });
  $('#goLeftAndRight').on('click', function() {
    $('#box').addClass('left-right').removeClass('soft');
  });
});
＆＃13; 
h2 {
  cursor: pointer;
}

#box {
  position: fixed;
  top: 100px;
  left: 400px;
  height: 100px;
  width: 100px;
  background-color: #358;
}

#box p {
  padding: 5px;
  color: #fff;
  text-align: center;
}

.soft {
  transition: all 0.3s ease-out;
}
@keyframes leftRight{
  0%{left:300px}
  100%{left:400px}
}

.left-right{
  left:400px
  animation: leftRight 0.3s forwards ease-in-out;
  -webkit-animation: leftRight 0.3s forwards ease-in-out;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <h2 id="goLeft">jump left</h2>
  <h2 id="goRight">slide right</h2>
  <h2 id="goLeftAndRight">jump left and slide right</h2>
  <div id="box">
    <p>use headers to move</div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

2＃ - 将您的功能与 setTimeout 功能结合使用。

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('#goLeft').on('click',function() {
    $('#box').removeClass('soft');
    $('#box').css('left','300px');
  });
  $('#goRight').on('click',function() {
    $('#box').addClass('soft');
    $('#box').css('left','400px');
  });
  $('#goLeftAndRight').on('click',function() {
    //copy
    $('#box').removeClass('soft');
    $('#box').css('left','300px');
     setTimeout(function() {
       $('#box').addClass('soft');
       $('#box').css('left','400px'); 
     }, 300);

       
  });
});
＆＃13; 
h2 {
  cursor:pointer;
}

#box {
  position: fixed;
  top:100px;
  left:400px;
  height:100px;
  width:100px;
  background-color:#358;
}

#box p {
  padding:5px;
  color:#fff;
  text-align:center;
}

.soft {
  transition: all 0.3s ease-out;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <h2 id="goLeft">jump left</h2>
    <h2 id="goRight">slide right</h2>
    <h2 id="goLeftAndRight">jump left and slide right</h2>
    <div id="box"><p>use headers to move</div>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

此安装程序不需要jQuery。

如果您编写一个包含.jump-left转换的CSS类：

.jump-left {
transform: translateX(-100px);
}

和一个包含.slide-right动画的CSS类：

.slide-right {
animation: slide-right-animation 1s ease-out;
}

@keyframes slide-right-animation {
  0% {transform: translateX(-100px);}
100% {transform: translateX(0);}
}

您可以使用onclick事件监听器来应用一个类或另一个类 - 或者一个跟随另一个类。

工作示例： 

var box = document.getElementsByClassName('box')[0];
var buttons = document.getElementsByTagName('button');

function buttonPress() {

    switch (true) {

        case (this.classList.contains('go-left')) :   
            box.setAttribute('class', 'box');
            box.classList.add('jump-left');
            break;
            
        case ((this.classList.contains('go-right')) && (box.classList.contains('jump-left'))) : 
            box.setAttribute('class', 'box');
            box.classList.add('slide-right');
            break;
        
        case (this.classList.contains('go-left-then-right')) :
            box.setAttribute('class', 'box');
            box.classList.add('jump-left');
            setTimeout(function(){
                box.classList.remove('jump-left');
                box.classList.add('slide-right');
            }, 300);
            break;
    }
}

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', buttonPress, false);
}
button {
cursor:pointer;
}

.box {
  position: fixed;
  top:50px;
  left:400px;
  height:100px;
  width:100px;
  background-color:#358;
}

.box p {
  padding:5px;
  color:#fff;
  text-align:center;
}

.jump-left {
transform: translateX(-100px);
}

.slide-right {
animation: slide-right-animation 1s ease-out;
}

@keyframes slide-right-animation {
  0% {transform: translateX(-100px);}
100% {transform: translateX(0);}
}
<button type="button" class="go-left">jump left</button>
<button type="button" class="go-right">slide right</button>
<button type="button" class="go-left-then-right">jump left and slide right</button>

<div class="box"><p>Use buttons to move.</p></div>

答案 2 :(得分：1)

修复延迟非常简单。您只需将向左跳转的辅助部分和向右滑动函数包含在setTimeout()函数中，如下所示：

setTimeout(function(){
    $('#box').addClass('soft');
    $('#box').css('left','400px');
}, 100);

以下是一个工作片段：

$(document).ready(function() {

  $('#goLeft').on('click',function() {
    $('#box').removeClass('soft').css('left','300px');
  });
  
  $('#goRight').on('click',function() {
    $('#box').addClass('soft').css('left','400px');
  });
  
  $('#goLeftAndRight').on('click',function() {
    $('#box').removeClass('soft').css('left','300px');
    
    //wait 100ms
    setTimeout(function(){
    	$('#box').addClass('soft').css('left','400px');
    }, 100);
          
  });
});
h2 {
  cursor:pointer;
}

#box {
  position: fixed;
  top:100px;
  left:400px;
  height:100px;
  width:100px;
  background-color:#358;
}

#box p {
  padding:5px;
  color:#fff;
  text-align:center;
}

.soft {
  transition: all 0.3s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <h2 id="goLeft">jump left</h2>
    <h2 id="goRight">slide right</h2>
    <h2 id="goLeftAndRight">jump left and slide right</h2>
    <div id="box"><p>use headers to move</div>
  </body>

修改

感谢Mohammad指出了一种更简单的方法来执行jQuery函数。我已调整上面的代码段来显示。

答案 3 :(得分：1)

默认添加软类，在leftright中使用超时

$(document).ready(function() {
    $('#goLeft').on('click', function() {
        $('#box').css('left', '300px');
    });
    $('#goRight').on('click', function() {
        $('#box').css('left', '400px');
    });
    $('#goLeftAndRight').on('click', function() {
        //copy
        $('#box').css('left', '300px');
        setTimeout(function() {
            $('#box').css('left', '400px');
        }, 300);
        //Need for timeout?
        //copy
    });
});

h2 {
cursor:pointer;
}
#box {
position: fixed;
top:100px;
left:400px;
height:100px;
width:100px;
background-color:#358;
}
#box p {
padding:5px;
color:#fff;
text-align:center;
}
.soft {
transition: all 0.3s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
   <body>
      <h2 id="goLeft">jump left</h2>
      <h2 id="goRight">slide right</h2>
      <h2 id="goLeftAndRight">jump left and slide right</h2>
      <div id="box" class="soft">
         <p>use headers to move
      </div>
   </body>
</html>

请参阅此demo

答案 4 :(得分：0)

添加100毫秒的超时工作正常。

下面是我用来重新创建你提到的场景并进行测试的代码。

<html>
<head>
<style>
h2 {
  cursor:pointer;
}

#box {
  position: fixed;
  top:100px;
  left:400px;
  height:100px;
  width:100px;
  background-color:#358;
}

#box p {
  padding:5px;
  color:#fff;
  text-align:center;
}

.soft {
  transition: all 0.3s ease-out;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('#goLeft').on('click',function() {
    $('#box').removeClass('soft');
    $('#box').css('left','300px');
  });
  $('#goRight').on('click',function() {
    $('#box').addClass('soft');
    $('#box').css('left','400px');
  });
  $('#goLeftAndRight').on('click',function() {
    //copy
    $('#box').removeClass('soft');
    $('#box').css('left','300px');
    //Need for timeout?
    //copy
    setTimeout(function(){
       $('#box').addClass('soft');
       $('#box').css('left','400px'); 
    }, 100);

  });
});
</script>
</head>
  <body>
    <h2 id="goLeft">jump left</h2>
    <h2 id="goRight">slide right</h2>
    <h2 id="goLeftAndRight">jump left and slide right</h2>
    <div id="box"><p>use headers to move</div>
  </body>
</html>

如果符合您的需要，请将其标记为答案。

答案 5 :(得分：0)

$('#goLeftAndRight').on('click',function() {
  //that part actually sets the initial position
  $('#box').removeClass('soft');
  $('#box').css('left','300px');

  // see below
  setTimeout(function() {
    $('#box').addClass('soft');
    $('#box').css('left','400px'); 
  },0);
});

这里的setTimeout只等待下一个browser available time

如果您打算使用不同的提示点进行高级动画，您可能会感兴趣https://greensock.com/timelinelite

答案 6 :(得分：-1)

addClass应该在动画开始时完成。

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('#goLeft').on('click',function() {
    $('#box').removeClass('soft');
    $('#box').stop().animate({left:'300px'},{queue: false, duration:0});
  });
  $('#goRight').on('click',function() {
    $('#box').addClass('soft');
    $('#box').stop().animate({left:'400px'},{queue: false});
  });
  $('#goLeftAndRight').on('click',function() {
    //copy
    $('#box').removeClass('soft');
$('#box').stop().animate({left:'300px'}, { 
    queue: false, duration:0}).animate({left:'400px'},{ queue: false, start:
 function(){$('#box').addClass('soft'); } });


  });

});
＆＃13; 
h2 {
  cursor:pointer;
}

#box {
  position: fixed;
  top:100px;
  left:400px;
  height:100px;
  width:100px;
  background-color:#358;
}

#box p {
  padding:5px;
  color:#fff;
  text-align:center;
}

.soft {
  transition: all 0.3s ease-out;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <h2 id="goLeft">jump left</h2>
    <h2 id="goRight">slide right</h2>
    <h2 id="goLeftAndRight">jump left and slide right</h2>
    <div id="box"><p>use headers to move</div>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题