向下滚动 Up/Scroll 时出现 SVG 闪烁问题
SVG Blink Issue On Scroll Up/Scroll Down
我有一个徽标，当您向下滚动时，它会变得模糊。当你向上滚动时，它会模糊回来。我正在使用 SVG 过滤器来完成这个。
逻辑：
向下滚动时。
应用模糊滤镜：url(#filt-blur-out)；到带有 class 的 SVG 字母：fadeMe
向上滚动时。
应用模糊滤镜：url(#filt-blur-in);到带有 class 的 SVG 字母：fadeMe
问题：
我遇到了一个问题，徽标在恢复动画模糊（双向）之前短暂消失了一瞬间。
重要提示：这似乎只发生在第二次你上下滚动，每之后的时间。
如果您知道是什么原因造成的，我会对您的回答非常感兴趣。到目前为止，我已经设法破解了几十次，但仅此而已。
jQuery(".qodef-page-header").waypoint(
function(direction) {
// Target this element and run the up or down animation respectively
if (direction === "down") {
$(".fadeMe").addClass("blur-in-fwd");
$(".fadeMe").removeClass("blur-in-bkw");
$("#animOut")
.get(0)
.beginElement(); // restart the animation
} else if (direction === "up") {
$(".fadeMe").addClass("blur-in-bkw");
$(".fadeMe").removeClass("blur-in-fwd");
$("#animIn")
.get(0)
.beginElement(); // restart the animation
}
},
{ offset: "0%" }
);
/* Added so you can scroll */
.header-logo {
height: 2000px;
}
#smooth-logo {
position: fixed;
}
/* SCROLLING ANIMATIONS */
.blur-in-fwd {
filter: url(#filt-blur-out);
}
.blur-in-bkw {
filter: url(#filt-blur-in);
}
#filt-blur-in {
/* animation-delay: 0.5s !important;*/
}
<!-- SCRIPTS -->
<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>
<!-- SVG LOGO -->
<header class="header-logo qodef-page-header">
<div id="smooth-logo">
<svg data-name="big-s" xmlns="http://www.w3.org/2000/svg" width="275px" height="85px" viewBox="0 0 2036.7197 612">
<title>Stable Smooth Logo</title>
<!-- Blur Animation -->
<defs>
<!-- BLUR IN -->
<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="0.5s" 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="0.5s" 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>
<!-- BLUR OUT -->
<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" fill="freeze" dur="1.2s" 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>
<!-- small the -->
<polygon id="dropIn1" class="dropIn1 dropInAll" points="150.137 367.127 137.813 367.127 137.813 443.443 150.137 443.443 150.137 411.917 234.251 411.917 234.251 398.656 150.137 398.656 150.137 367.127"/>
<polygon id="dropIn2" class="dropIn2 dropInAll" points="137.813 282.344 179.534 282.344 179.534 334.01 137.813 334.01 137.813 347.139 234.251 347.139 234.251 334.01 191.992 334.01 191.992 282.344 234.251 282.344 234.251 269.212 137.813 269.212 137.813 282.344"/>
<polygon id="dropIn3" class="dropIn3 dropInAll" points="222.066 172.104 222.066 229.389 191.725 229.389 191.725 181.212 179.534 181.212 179.534 229.389 150.004 229.389 150.004 172.104 137.813 172.104 137.813 242.518 234.251 242.518 234.251 172.104 222.066 172.104"/>
<!-- BIG S -->
<path id="bigS" class="fadeMe bigS slideAll" 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="fadeMe bigS1 slideAll" 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"/>
<!-- ICON UPPER -->
<polygon id="bigS2" class="bigS2 slideAll"points="1022.924 362.747 964.44 234.65 909.723 362.747 859.133 362.747 940.211 171.373 989.104 171.373 1070.894 362.747 1022.924 362.747"/>
<!-- ICON LOWER -->
<polygon id="bigS3" class="bigS3 slideAll" points="819.226 444.996 839.223 403.871 1090.947 403.871 1110.751 444.996 819.226 444.996"/>
<!-- BIG B -->
<path id="bigS4" class="fadeMe bigS4 slideAll" d="M1162.8,444.9959V171.38h126.5218c30.6233,0,54.9008,8.0925,70.2054,23.3971,11.8676,11.8747,17.6358,26.2214,17.6358,43.8714,0,52.9109-39.4831,64.1835-39.4831,64.1835s55.5343,7.9083,55.5343,69.55c0,63.2891-63.0285,72.6141-100.6033,72.6141Zm47.3013-41.1245h82.51c45.3081,0,52.07-24.1155,52.07-38.49,0-15.1989-7.029-39.3074-54.1261-39.3074h-80.453Zm0-117.0149h65.6415c46.0124,0,52.8864-23.6014,52.8864-37.6664,0-23.89-18.2345-36.686-48.7733-36.686h-69.7546Z"/>
<!-- BIG L -->
<polygon id="bigS5" class="fadeMe bigS5 slideAll" points="1454.812 444.996 1454.812 171.38 1503.761 171.38 1503.761 401.808 1650.476 401.808 1629.693 444.996 1454.812 444.996"/>
<!-- BIG E -->
<polygon id="bigS6" class="fadeMe bigS6 slideAll" points="1694.008 444.996 1694.008 171.38 1898.906 171.38 1878.604 213.328 1742.542 213.328 1742.542 281.122 1856.181 281.122 1835.818 323.07 1742.542 323.07 1742.542 403.04 1898.482 403.04 1878.199 444.996 1694.008 444.996"/>
</svg>
</div>
</div>
我不太熟悉 Waypoint JS，但是你可以在 https://jsfiddle.net/b85612w7/22/
看到我的作品
基本上我认为 waypoint.js beginElement 和 jQuery addClass and removeClass 之间存在一些流程冲突，所以我尝试通过将动画持续时间添加到 setTimeout()
来努力解决这个问题
我有一个徽标，当您向下滚动时，它会变得模糊。当你向上滚动时，它会模糊回来。我正在使用 SVG 过滤器来完成这个。
逻辑：
向下滚动时。 应用模糊滤镜：url(#filt-blur-out)；到带有 class 的 SVG 字母：fadeMe
向上滚动时。 应用模糊滤镜：url(#filt-blur-in);到带有 class 的 SVG 字母：fadeMe
问题：
我遇到了一个问题，徽标在恢复动画模糊（双向）之前短暂消失了一瞬间。
重要提示：这似乎只发生在第二次你上下滚动，每之后的时间。
如果您知道是什么原因造成的，我会对您的回答非常感兴趣。到目前为止，我已经设法破解了几十次，但仅此而已。
jQuery(".qodef-page-header").waypoint(
function(direction) {
// Target this element and run the up or down animation respectively
if (direction === "down") {
$(".fadeMe").addClass("blur-in-fwd");
$(".fadeMe").removeClass("blur-in-bkw");
$("#animOut")
.get(0)
.beginElement(); // restart the animation
} else if (direction === "up") {
$(".fadeMe").addClass("blur-in-bkw");
$(".fadeMe").removeClass("blur-in-fwd");
$("#animIn")
.get(0)
.beginElement(); // restart the animation
}
},
{ offset: "0%" }
);
/* Added so you can scroll */
.header-logo {
height: 2000px;
}
#smooth-logo {
position: fixed;
}
/* SCROLLING ANIMATIONS */
.blur-in-fwd {
filter: url(#filt-blur-out);
}
.blur-in-bkw {
filter: url(#filt-blur-in);
}
#filt-blur-in {
/* animation-delay: 0.5s !important;*/
}
<!-- SCRIPTS -->
<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>
<!-- SVG LOGO -->
<header class="header-logo qodef-page-header">
<div id="smooth-logo">
<svg data-name="big-s" xmlns="http://www.w3.org/2000/svg" width="275px" height="85px" viewBox="0 0 2036.7197 612">
<title>Stable Smooth Logo</title>
<!-- Blur Animation -->
<defs>
<!-- BLUR IN -->
<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="0.5s" 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="0.5s" 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>
<!-- BLUR OUT -->
<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" fill="freeze" dur="1.2s" 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>
<!-- small the -->
<polygon id="dropIn1" class="dropIn1 dropInAll" points="150.137 367.127 137.813 367.127 137.813 443.443 150.137 443.443 150.137 411.917 234.251 411.917 234.251 398.656 150.137 398.656 150.137 367.127"/>
<polygon id="dropIn2" class="dropIn2 dropInAll" points="137.813 282.344 179.534 282.344 179.534 334.01 137.813 334.01 137.813 347.139 234.251 347.139 234.251 334.01 191.992 334.01 191.992 282.344 234.251 282.344 234.251 269.212 137.813 269.212 137.813 282.344"/>
<polygon id="dropIn3" class="dropIn3 dropInAll" points="222.066 172.104 222.066 229.389 191.725 229.389 191.725 181.212 179.534 181.212 179.534 229.389 150.004 229.389 150.004 172.104 137.813 172.104 137.813 242.518 234.251 242.518 234.251 172.104 222.066 172.104"/>
<!-- BIG S -->
<path id="bigS" class="fadeMe bigS slideAll" 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="fadeMe bigS1 slideAll" 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"/>
<!-- ICON UPPER -->
<polygon id="bigS2" class="bigS2 slideAll"points="1022.924 362.747 964.44 234.65 909.723 362.747 859.133 362.747 940.211 171.373 989.104 171.373 1070.894 362.747 1022.924 362.747"/>
<!-- ICON LOWER -->
<polygon id="bigS3" class="bigS3 slideAll" points="819.226 444.996 839.223 403.871 1090.947 403.871 1110.751 444.996 819.226 444.996"/>
<!-- BIG B -->
<path id="bigS4" class="fadeMe bigS4 slideAll" d="M1162.8,444.9959V171.38h126.5218c30.6233,0,54.9008,8.0925,70.2054,23.3971,11.8676,11.8747,17.6358,26.2214,17.6358,43.8714,0,52.9109-39.4831,64.1835-39.4831,64.1835s55.5343,7.9083,55.5343,69.55c0,63.2891-63.0285,72.6141-100.6033,72.6141Zm47.3013-41.1245h82.51c45.3081,0,52.07-24.1155,52.07-38.49,0-15.1989-7.029-39.3074-54.1261-39.3074h-80.453Zm0-117.0149h65.6415c46.0124,0,52.8864-23.6014,52.8864-37.6664,0-23.89-18.2345-36.686-48.7733-36.686h-69.7546Z"/>
<!-- BIG L -->
<polygon id="bigS5" class="fadeMe bigS5 slideAll" points="1454.812 444.996 1454.812 171.38 1503.761 171.38 1503.761 401.808 1650.476 401.808 1629.693 444.996 1454.812 444.996"/>
<!-- BIG E -->
<polygon id="bigS6" class="fadeMe bigS6 slideAll" points="1694.008 444.996 1694.008 171.38 1898.906 171.38 1878.604 213.328 1742.542 213.328 1742.542 281.122 1856.181 281.122 1835.818 323.07 1742.542 323.07 1742.542 403.04 1898.482 403.04 1878.199 444.996 1694.008 444.996"/>
</svg>
</div>
</div>
我不太熟悉 Waypoint JS，但是你可以在 https://jsfiddle.net/b85612w7/22/
看到我的作品基本上我认为 waypoint.js beginElement 和 jQuery addClass and removeClass 之间存在一些流程冲突，所以我尝试通过将动画持续时间添加到 setTimeout()