如何用jquery或js结束CSS转换?

Jason C. • 4 年前 • 322 次点击

我想用jquery或js结束我的CSS转换。我不是说暂停,我想结束他们,就好像他们100%完成了。我有CSS转换而不是动画。

我在上面使用转换的属性是左上角,它是位置绝对元素。

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/38081

322 次点击

文章 [ 3 ] | 最新文章 4 年前

• 1 楼

Azad Zain 5 年前

$('.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>

• 2 楼

Leon A.G.A. 5 年前

你好,你的问题有点模棱两可。

如果使用转换而不是动画,则可以在同一个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);

如果你想要的东西被触发了,那么atribute将被设置为no。过渡,这也切断了一个运行。

• 3 楼

Kaiido 5 年前

您可以简单地将转换属性规则重写为 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>

现在,如何触发这个取决于您自己,它可以使用一个特殊的类,或者任何其他条件。

登录后回复