文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >CSS动画-请告诉我为什么案例#1有效，但案例#2不能。

问CSS动画-请告诉我为什么案例#1有效，但案例#2不能。
EN

Stack Overflow用户
提问于 2019-04-12 19:51:55
回答 1查看 89关注 0票数 0

动画正在应用的动画是一个CSS“模糊”，应该模糊上滚动上的元素，然后把它带回焦点上滚动。

示例1-工作！和是相同的。jQuery略有不同，因为它针对的是父元素而不是子元素。(工作于FF和Chrome)

示例2-不起作用！和是相同的。jQuery略有不同，因为它针对的是子元素而不是父元素。(在FF中工作，但不使用Chrome)

发生了什么事?在第一种情况下，jQuery用模糊动画锁定父对象，并在预期的情况下，将模糊和非模糊的目标放在滚动页上。

，怎么了?在第二个例子中，除了针对父母之外，一切都是一样的，我想模糊只是把字母"S“和"T”放在一边。

如您所见，在第一种情况下工作的相同的模糊样式类也被应用于第二种情况。然而，尽管样式被应用于第二种情况，但它们实际上并没有影响元素。没有模糊，没有边框(这是我为测试添加的)。

有人知道为什么这个动画会在父元素上工作，影响到子元素，而在针对特定的子元素时却不能工作？

谢谢!

例1(工程)

代码语言：javascript
复制
jQuery(document).ready(function($) {

	// Smooth OUT
	$('#smooth-logo').waypoint(function(direction) {
		
		if (direction === 'down') {

			$('#smooth-logo').addClass('swirl-in-fwd');
			$('#smooth-logo').removeClass('swirl-in-bkw');

		} else if (direction === 'up') {  

			$('#smooth-logo').addClass('swirl-in-bkw');
			$('#smooth-logo').removeClass('swirl-in-fwd');
		}
	}, 
		
	{ offset: '0%' });
	
});
代码语言：javascript
复制
.header {
  min-height: 2000px;
  position: relative;
}

#smooth-logo {
  position: fixed;
}

/* SCROLLING ANIMATIONS */
.swirl-in-fwd {
  animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  border: 1px solid red;
}
.swirl-in-bkw {
  animation: text-blur-in 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  border: 1px solid blue;
}


/* SCROLLING ANIMATIONS */

@keyframes text-blur-out {
  0% {
    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
  100% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
}
@keyframes text-blur-in {
  0% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
  100% {

    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="../custom.js"></script>
<link href="smooth.css" rel="stylesheet" type="text/css">

<header class="header">
<div id="smooth-logo">
	<svg data-name="big-s" xmlns="http://www.w3.org/2000/svg" width="10in" height="2in" viewBox="0 0 2036.7197 612">
		<title>Stable Smooth Logo</title>

		<!-- BIG S -->
		<path id="bigS" class="" d="M362.2168,367.2317c23.8106,16.6907,51.0516,32.82,83.83,32.82,32.1888,0,56.8072-10.392,56.8072-33.4934,0-22.7209-10.6044-34.0863-70.4407-43.93-59.8364-10.6044-89.757-33.7058-89.757-78.3966,0-46.9588,39.96-79.6635,99.4161-79.6635,36.6579,0,63.8458,7.9425,97.4489,28.7153l-18.0235,37.88c-33.9085-17.7179-47.9607-24.0272-78.4851-24.0272-30.6717,0-49.227,14.75-49.227,35.9591,0,19.3162,10.6044,28.7841,67.4117,38.6325,65.1385,10.98,93.5422,35.2179,93.5422,81.8012,0,49.6124-39.7691,83.9606-109.8293,83.9606-38.3944,0-79.8883-17.5373-102.94-38.04Z"/>

		<!-- BIG T -->
		<polygon id="bigS1" class="" points="682.881 444.996 682.881 215.385 581.132 215.385 602.355 171.38 842.615 171.38 821.253 215.385 731.83 215.385 731.83 444.996 682.881 444.996"/>

	</svg>
</div>
</header>

​

示例2(即使将样式应用于元素也不起作用)

​

代码语言：javascript
复制
jQuery(document).ready(function($) {

	// Smooth OUT
	$('#smooth-logo').waypoint(function(direction) {
		
		if (direction === 'down') {

			$('#bigS').addClass('swirl-in-fwd');
			$('#bigS').removeClass('swirl-in-bkw');

		} else if (direction === 'up') {  

			$('#bigS').addClass('swirl-in-bkw');
			$('#bigS').removeClass('swirl-in-fwd');
		}
	}, 
		
	{ offset: '0%' });
	
});
代码语言：javascript
复制
.header {
  min-height: 2000px;
  position: relative;
}

#smooth-logo {
  position: fixed;
}

/* SCROLLING ANIMATIONS */
.swirl-in-fwd {
  animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  border: 1px solid red;
}
.swirl-in-bkw {
  animation: text-blur-in 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  border: 1px solid blue;
}


/* SCROLLING ANIMATIONS */

@keyframes text-blur-out {
  0% {
    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
  100% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
}
@keyframes text-blur-in {
  0% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
  100% {

    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="../custom.js"></script>
<link href="smooth.css" rel="stylesheet" type="text/css">

<header class="header">
<div id="smooth-logo">
	<svg data-name="big-s" xmlns="http://www.w3.org/2000/svg" width="10in" height="2in" viewBox="0 0 2036.7197 612">
		<title>Stable Smooth Logo</title>

		<!-- BIG S -->
		<path id="bigS" class="" d="M362.2168,367.2317c23.8106,16.6907,51.0516,32.82,83.83,32.82,32.1888,0,56.8072-10.392,56.8072-33.4934,0-22.7209-10.6044-34.0863-70.4407-43.93-59.8364-10.6044-89.757-33.7058-89.757-78.3966,0-46.9588,39.96-79.6635,99.4161-79.6635,36.6579,0,63.8458,7.9425,97.4489,28.7153l-18.0235,37.88c-33.9085-17.7179-47.9607-24.0272-78.4851-24.0272-30.6717,0-49.227,14.75-49.227,35.9591,0,19.3162,10.6044,28.7841,67.4117,38.6325,65.1385,10.98,93.5422,35.2179,93.5422,81.8012,0,49.6124-39.7691,83.9606-109.8293,83.9606-38.3944,0-79.8883-17.5373-102.94-38.04Z"/>

		<!-- BIG T -->
		<polygon id="bigS1" class="" points="682.881 444.996 682.881 215.385 581.132 215.385 602.355 171.38 842.615 171.38 821.253 215.385 731.83 215.385 731.83 444.996 682.881 444.996"/>

	</svg>
</div>
</header>

​

jquery
svg
css-animations
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-13 08:13:48

区别在于，在第一个示例中，您将CSS筛选器函数应用于HTML元素。在第二步，您将向SVG子元素应用一个CSS过滤器函数。还不是所有的浏览器都支持在SVG元素上使用过滤器函数。

解决办法是使用SVG过滤器和动画代替。

请注意，SVG动画在IE/Edge中不工作。因此，您可能需要使用一个多填充。请参阅https://leunen.me/fakesmile/

​

代码语言：javascript
复制
jQuery(document).ready(function($) {

	// Smooth OUT
	$('#smooth-logo').waypoint(function(direction) {
		
		if (direction === 'down') {

			$('#bigS').addClass('swirl-in-fwd');
			$('#bigS').removeClass('swirl-in-bkw');
			$('#animOut').get(0).beginElement(); // restart the animation

		} else if (direction === 'up') {  

			$('#bigS').addClass('swirl-in-bkw');
			$('#bigS').removeClass('swirl-in-fwd');
			$('#animIn').get(0).beginElement(); // restart the animation
		}
	}, 
		
	{ offset: '0%' });
	
});
代码语言：javascript
复制
.header {
  min-height: 2000px;
  position: relative;
}

#smooth-logo {
  position: fixed;
}

/* SCROLLING ANIMATIONS */
.swirl-in-fwd {
  filter: url(#filt-blur-out);
}
.swirl-in-bkw {
  filter: url(#filt-blur-in);
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="../custom.js"></script>
<link href="smooth.css" rel="stylesheet" type="text/css">

<header class="header">
<div id="smooth-logo">
	<svg data-name="big-s" xmlns="http://www.w3.org/2000/svg" width="10in" height="2in" viewBox="0 0 2036.7197 612">
		<title>Stable Smooth Logo</title>
    <defs>
      <filter id="filt-blur-out" x="-50%" y="-50%" width="200%" height="200%">
        <feGaussianBlur in="SourceGraphic" stdDeviation="0" result="blurpart">
          <animate id="animOut"
                   attributeName="stdDeviation" from="0" to="50" dur="1.2s" fill="freeze" begin="indefinite"
                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
        </feGaussianBlur>
        <feFlood flood-color="white" flood-opacity="1" result="alphapart">
          <animate attributeName="flood-opacity" from="1" to="0" dur="1.2s" fill="freeze" begin="animOut.begin"
                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
        </feFlood>
        <feComposite in="blurpart" in2="alphapart" operator="in"/>
      </filter>
      
      <filter id="filt-blur-in" x="-50%" y="-50%" width="200%" height="200%">
        <feGaussianBlur in="SourceGraphic" stdDeviation="50" result="blurpart">
          <animate id="animIn"
                   attributeName="stdDeviation" from="50" to="0" dur="1.2s" fill="freeze" begin="indefinite"
                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
        </feGaussianBlur>
        <feFlood flood-color="white" flood-opacity="0" result="alphapart">
          <animate attributeName="flood-opacity" from="0" to="1" dur="1.2s" fill="freeze" begin="animIn.begin"
                   calcMode="spline" keyTimes="0; 1" keySplines="0.550 0.085 0.680 0.530"/>
        </feFlood>
        <feComposite in="blurpart" in2="alphapart" operator="in"/>
      </filter>
    </defs>

		<!-- BIG S -->
		<path id="bigS" class="" d="M362.2168,367.2317c23.8106,16.6907,51.0516,32.82,83.83,32.82,32.1888,0,56.8072-10.392,56.8072-33.4934,0-22.7209-10.6044-34.0863-70.4407-43.93-59.8364-10.6044-89.757-33.7058-89.757-78.3966,0-46.9588,39.96-79.6635,99.4161-79.6635,36.6579,0,63.8458,7.9425,97.4489,28.7153l-18.0235,37.88c-33.9085-17.7179-47.9607-24.0272-78.4851-24.0272-30.6717,0-49.227,14.75-49.227,35.9591,0,19.3162,10.6044,28.7841,67.4117,38.6325,65.1385,10.98,93.5422,35.2179,93.5422,81.8012,0,49.6124-39.7691,83.9606-109.8293,83.9606-38.3944,0-79.8883-17.5373-102.94-38.04Z"/>

		<!-- BIG T -->
		<polygon id="bigS1" class="" points="682.881 444.996 682.881 215.385 581.132 215.385 602.355 171.38 842.615 171.38 821.253 215.385 731.83 215.385 731.83 444.996 682.881 444.996"/>

	</svg>
</div>
</header>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/55658586

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档