如何用jquery或js结束CSS转换?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何用jquery或js结束CSS转换?相关的知识,希望对你有一定的参考价值。
我想用jquery或js结束我的css转换。我并不是说暂停,我想结束它们,好像它们已经完成了100%。我有css过渡而不是动画。
我使用转换的属性是顶部和左侧,它是位置绝对元素。
答案
您可以简单地将transition属性规则覆盖为none
。
#el {
position: relative;
left: 0;
top: 25px;
width: 50px;
height: 50px;
transition: all 5s linear;
background: red;
}
body:hover #el{
left: calc(100vw - 50px);
}
button:active + #el {
transition-property: none;
}
:root,body{margin:0}
<button>stop transition</button>
<div id="el"></div>
另一答案
你好,你的问题有点模棱两可。
如果您使用转换而不是动画,则可以在同一个css示例中控制它的流程:
transition: background-color .2s linear 0s; /*Standard*/
如果要使用JS中断转换,可以在触发所需的某个操作时将其他Css valor分配给其他类名或属性。
.normal{
transition: background-color .2s linear 0s; /*Standard*/
}
[stop = yes] {
background: black;
}
document.body.addEventListener('mouseover', function(e){
e.stopPropagation();
if(someting you want){
document.queryselector(".normal").setAttribute("stop","yes");
}
else{
document.queryselector(".normal").setAttribute("stop","no");
}
},false);
如果你想要的东西被触发,那么该属性将被设置为no转换,这也会切断正在运行的属性。
另一答案
$('.toggle-animation').click(function(){
$('.element').stop(true).toggleClass('animating');
});
.element{
top: 0px;
left: 0px;
width: 100px;
height: 100px;
position:relative;
background: red
}
.animating{
top: 100px;
left: 100px;;
transition: all 5s linear 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element"></div>
<button type="button" class="toggle-animation">Click me</button>
以上是关于如何用jquery或js结束CSS转换?的主要内容,如果未能解决你的问题,请参考以下文章
如何用javascript或jquery实现图片与二进制的转换
如何用js使得一个已经结束的css的animation动画重新执行一遍