为什么鼠标移出时我的CSS过渡突然结束? [英] Why is my CSS transition ending abruptly on mouse-out?

问题描述

我只是测试了几个CSS过渡(我是CSS的初学者).所有过渡都进展顺利.但是在其中一种过渡中，当鼠标悬停完成时，过渡会平稳进行，一旦您将鼠标移出，过渡就会突然结束.在所有其他情况下，mouseover和mouseout都可以正常运行.

I was just testing few CSS transitions( I am beginner in CSS ). All of the transitions are going smooth. But in one of the transition, when mouseover is done transition plays smoothly, and as soon as you do a mouse out it abruptly ends. In all other cases, mouseover and mouseout both are playing fine.

转换以这种方式结束的原因是什么?如何解决? (固定:感谢@Edwin). 现在，请解释为什么它无法正常工作.

What is the reason why the transition is ending in such manner? How to fix it? ( Fixed: Thanks to @Edwin ). Now, please explain Why it is not working with no changes.

jsbin: http://jsbin.com/oposof ， http://jsbin .com/oposof/5 (我担心第一个过渡为三角形").

jsbin: http://jsbin.com/oposof , http://jsbin.com/oposof/5 ( I am concerned about the first transition 'Triangle' ).

  #container1 >  div.triangle {
     border-bottom: 80px solid red;
     border-left: 60px solid transparent; 
     border-right: 60px solid transparent;
      width: 0px;
      height: 0px;

    -webkit-transition: all 1.2s ease-in-out;

  }

  #container1 >  div.triangle:hover {
    border-top: 80px solid green;
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent;
  }


  #container1 >  div.triangle:active {
    border-left: 80px solid blue; 
    border-right: 60px solid transparent;

  }



  #container2 > div.testt {
    color: red;
    -webkit-transition: all 1s ease-in-out;
  }

  #container2 > div.testt:hover {
    color:yellow;
  }

  #container3 >  div.circle {
    border-radius: 70px;
    width: 100px;
    height: 100px;
    background: red;
    -webkit-border-radius: 50px;

    -webkit-transition: all 1.2s ease-in-out;

  }

  #container3 >  div.circle:hover {
    -webkit-border-radius: 20px;
    -webkit-transform: rotate(-45deg);
  }

我已经使用了-webkit-，所以上面的演示仅适用于chrome和safari.添加了-moz-现在，您也可以在Mozilla上进行测试(希望也可以在IE中进行测试). http://jsbin.com/oposof/5

I have used -webkit- , so the above demo will work only on chrome and safari. Added -moz- Now, you can test it on Mozilla too ( hopefully in IE as well ). http://jsbin.com/oposof/5

推荐答案

似乎突然出现是由于以下事实:默认情况下，它的顶部没有边框，然后悬停时，它的顶部突然带有边框.因此，在mouseout中，不进行过渡，而是隐藏顶部边框，因为没有初始值可供过渡参考.

It seems the abruptness is due to the fact that by default it does not have a border on top, then on hover it suddenly has border on top. So in mouseout, instead of transitioning, what its doing is hiding the top border because there was no initial value to reference for transition.

尝试一下:

#container1 >  div.triangle {
    border-bottom: 80px solid red;
    border-top: 0 solid green;
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent;
    width: 0px;
    height: 0px;

   -webkit-transition: all 1.2s ease-in-out;
}

这篇关于为什么鼠标移出时我的CSS过渡突然结束?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！