Question

我尝试在Chrome中进行最简单的不透明度转换，但我发现虽然它经常是平滑的，但有时会直接跳到不透明度：0或不透明度：1，没有转换。

简化版，仅适用于webkit：

angular.module('mod', []).
directive('myBind', function() {
  return {
    restrict : 'A',
    scope : {
      scopeVar : '@'
    },
    link : function(scope,element,attr){
      element.attr('ng-bind', scope.scopeVar);
      element.text(scope.scopeVar);
    }
  };
});


var app = angular.module('app', [ 'mod' ]);
angular.element(document).ready(function() {
  angular.module('app').run(function($rootScope){
    $rootScope.scopeVar = 'This is scope variable.';
  });
  angular.bootstrap(document, ['app']);
});

https://jsfiddle.net/bhydbakn/

我发现让它出错的最好方法是翻转，点击，滚动，再次翻转，等待它达到不透明度：0，然后非常缓慢（逐个像素）滚动图像向下的方向。当我这样做时，有一半时间会直接跳回到不透明度：1而不是顺利过渡。

我在Windows 7上使用Chrome 45.0.2454.101 m。已经在同事的PC上进行了测试，发现了相同的问题。

这是一个错误的视频。它工作到大约一半：http://webm.host/41dce/

Answer 1

这是一个更新的代码：

<style>
.box {
    background-color: #ff0000;
    width: 100px;
    height: 100px;
    opacity: 1;
    -webkit-transform: translateZ(0);
    -webkit-transition: opacity 1s ease-in-out;
}
.box:hover {
    opacity: 0;
}
</style>

<div class="box"></div>

注意使用转换声明添加到.box容器的默认不透明度，缓动函数和默认硬件加速。

请注意，我无法重现您的问题。它可能是一个浏览器。

Answer 2

这应该可以解决您的问题

$(".box").mouseenter(
  function(){
    $(this).animate({opacity:'0'},'1000')
  });
$(".box").mouseleave(
  function() {
    $(this).animate({opacity:'1'},'1000')
  });

https://jsfiddle.net/bhydbakn/2/

在悬停跳跃问题上Chrome CSS过渡不透明度

2 个答案: