javascript - Webkit 动画干扰 jQuery 功能

Question

我在 div 中使用 jQuery 函数来创建视差背景。

当页面加载时，我有一些为背景设置动画的 css webkit 动画。

但是，在页面加载完成后，我在背景上设置视差效果动画的 jQuery 函数不起作用。

这是我的代码:

$(document).ready(function(){
        
        $('#square').mousemove(function(e) {
             var x = -(e.pageX + this.offsetLeft) / 4;
             var y = -(e.pageY + this.offsetTop) / 4;
             $(this).css('background-position', x + 'px ' + y + 'px');
         });
        
});

#square { height: 700px; 
                  width: 500px; 
                  display: inline-block; 
                  margin-left: 100px; 
                  position: absolute; 
                  right: 37%; 
                  top: 15%;
		          background: transparent;
		         -webkit-animation-name: image-fadein;
		         -webkit-animation-delay: .8s;
		         -webkit-animation-duration: 1s;
		         -webkit-animation-iteration-count: 1;
		         -webkit-animation-timing-function: ease-in-out;
		         -webkit-animation-fill-mode: forwards;
		
                 @-webkit-keyframes image-fadein {
			        0% { background: transparent; }
			        25% { background: #f2efef; }
			        50% { background: #333; }
			        100% { background-image: url(https://destinyguides.files.wordpress.com/2014/08/destiny-wallpaper-3.jpg);
				           background-size: cover no-repeat;
				           background-position: 35% 30%; }
		         }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="square">
	<span class="l1"></span>
	<span class="l2"></span>
	<span class="l3"></span>
	<span class="l4"></span>
</div>

我应该提到，当我从 div 元素中完全删除 webkit 动画并只保留高度、宽度、显示、边距、位置和背景时，jQuery 函数确实有效。

有谁知道为什么 webkit 动画会干扰 jQuery 代码？

Answer 1

这是因为使用关键帧规则设置动画的属性不能被内联 css 规则覆盖，或者至少不能被我测试过的任何方法覆盖。

你可以

1. 将动画样式移动到一个类
2. 将类添加到元素
3. 添加一个 animationend 监听器来监听动画结束
4. 在动画结束时移除动画类并重置背景图像和其他样式。

$(document).ready(function(){
  $('#square').mousemove(function(e) {
    var x = -(e.pageX + this.offsetLeft) / 4;
    var y = -(e.pageY + this.offsetTop) / 4;
    $(this).css("background-position",x + 'px ' + y + 'px');
  }).on("animationend",function(e){
    //You can access animation-name value by
    //e.originalEvent.animationName

    $(this).removeClass("animated").css({
      backgroundImage:"url(https://destinyguides.files.wordpress.com/2014/08/destiny-wallpaper-3.jpg)",
      backgroundSize: 'cover no-repeat',
      backgroundPosition: '35% 30%'
    });
  });
});

#square { 
  width: 80%; 
  height:100%;
  position: absolute; 
  top: 0px;
  left:0px;
  background: transparent;
}

.animated {
  -webkit-animation-name: image-fadein;
  -webkit-animation-delay: .8s;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;  
}

@-webkit-keyframes image-fadein {
  0% { background: transparent; }
  25% { background: #f2efef; }
  50% { background: #333; }
  100% { background-image: url(https://destinyguides.files.wordpress.com/2014/08/destiny-wallpaper-3.jpg);
    background-size: cover no-repeat;
    background-position: 35% 30%; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="square" class="animated">
  <span class="l1"></span>
  <span class="l2"></span>
  <span class="l3"></span>
  <span class="l4"></span>
</div>

您还可以遍历 styleSheets 集合以找到 keyframes rule ("image-fadein")，从那里找到最后一个关键帧规则 ("100%")，然后从那里修改样式。

演示

$(document).ready(function(){
  var KFSRule = findKFSRule("image-fadein");
  var KFRule = KFSRule && KFSRule.findRule("100%");
  $('#square').mousemove(function(e) {
    var x = -(e.pageX + this.offsetLeft) / 4;
    var y = -(e.pageY + this.offsetTop) / 4;
    if(KFRule){
      KFRule.style.backgroundPosition = x + 'px ' + y + 'px';
    }
  });
}); 

function findKFSRule(ruleName) {
  var foundRule = null;
  var sheets = [].slice.call(document.styleSheets);
  sheets.forEach(function(sheet){
    var rules = [].slice.call(sheet.cssRules);
    rules.forEach(function(rule){
      if(rule.type == CSSRule.WEBKIT_KEYFRAMES_RULE && rule.name==ruleName){
        foundRule = rule;
      }
    });
  });
  return foundRule;
}

#square { 
  width: 80%; 
  height:100%;
  position: absolute; 
  top: 0px;
  left:0px;
  background: transparent;
  -webkit-animation-name: image-fadein;
  -webkit-animation-delay: .8s;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes image-fadein {
  0% { background: transparent; }
  25% { background: #f2efef; }
  50% { background: #333; }
  100% { background-image: url(https://destinyguides.files.wordpress.com/2014/08/destiny-wallpaper-3.jpg);
    background-size: cover no-repeat;
    background-position: 35% 30%; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="square">
  <span class="l1"></span>
  <span class="l2"></span>
  <span class="l3"></span>
  <span class="l4"></span>
</div>

请注意，如果样式表是外部样式表，则不能遍历样式表 css 规则。所以你的样式必须嵌入到页面中，即<style></style>

如果您需要在外部样式表中定义它们，您可能需要找到另一种解决方法，也许可以使用 CSSStyleSheet.deleteRule , CSSStyleSheet.insertRule或其他方法。