Question

我的问题与我之前的问题Triggering css animate class on scroll

有关

我试图弄清楚如何在内部SVG元素类上触发视口Javascript。您可以在此处看到示例：http://codepen.io/anon/pen/Afqza

<div style="height: 400px;"></div>
<svg version="1.1" id="lock" xmlns="http://www.w3.org/2000/svg" width="85px" height="85px" viewBox="0 0 103 103" ><g><g><g><g><circle style="fill:#E84849;" cx="51.5" cy="51.501" r="51.125"/></g></g></g></g><g><g><g class="shackle"><path style="fill:#CFC7BE;" d="M78.345,46.518c0-14.869-11.813-28.387-26.386-28.387c-14.573,0-26.386,13.518-26.386,28.387h6.829c0-11.021,8.756-21.419,19.557-21.419s19.557,10.398,19.557,21.419H78.345z"/><path style="fill:#E8E7E7;" d="M61.385,20.101v7.816c3.039,1.927,5.583,4.717,7.362,7.975V24.879C66.562,22.886,64.076,21.26,61.385,20.101z"/></g><g><path style="fill:#F4E028;" d="M78.358,79.801c0,3.116-2.579,5.642-5.765,5.642H31.281c-3.186,0-5.764-2.525-5.764-5.642V46.419c0-3.116,52.841-3.116,52.841,0V79.801z"/></g><g><path style="fill:#DAC425;" d="M58.047,59.944c0-3.253-2.638-5.89-5.889-5.89c-3.253,0-5.889,2.637-5.889,5.89c0,2.481,1.536,4.599,3.705,5.468v5.431c0,1.151,0.935,2.084,2.085,2.084c1.153,0,2.086-0.933,2.086-2.084v-5.36C56.418,64.666,58.047,62.498,58.047,59.944z"/></g><g><path style="fill:#D0B82B;" d="M46.048,59.944c0-3.253,2.637-5.89,5.891-5.89c0,0-4.105,2.737-4.105,5.99c0,3.312,3.097,5.276,3.097,5.276v5.581c0,1.153,1.104,2.024,1.104,2.024c-1.15,0-2.085-0.933-2.085-2.084v-5.36C47.677,64.666,46.048,62.498,46.048,59.944z"/></g></g><g><polygon style="fill:#F8E349;" points="68.747,85.442 61.385,85.442 61.385,44.219 68.747,44.585 "/></g></g></svg>


    .shackle {

     animation-name: open;
    -webkit-animation-name: open;   
    animation-duration: 0.5s;   
    -webkit-animation-duration: 0.5s;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform-origin: bottom left;

}

@keyframes open {
    0% {
        transform: rotate(0deg);    
    }
    50% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(0deg);    
    }                       
}

@-webkit-keyframes open {
    0% {
        -webkit-transform: rotate(0deg);    
    }
    50% {
        -webkit-transform: rotate(-10deg);
    }
    100% {
        -webkit-transform: rotate(0deg);    
    }

}

var onAppear = [];

document.addEventListener("DOMContentLoaded", function() {
  onAppear = [].map.call(document.querySelectorAll("#lock"), function(item ) {
    return item;
  });
}, false);

window.addEventListener("scroll", function() {
  onAppear.forEach(function(elem) {
    var vwTop = window.pageYOffset;
    var vwBottom = (window.pageYOffset + window.innerHeight);
    var elemTop = elem.offsetTop;
    var elemHeight = elem.offsetHeight;

    if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) {
     elem.classList.add("shackle");
    } else {
      elem.classList.remove("shackle");
    }
  });
}, false);

目前整个挂锁动画而不是我想要动画的束缚。一定很简单，但我无法理解。

Answer 1

问题是你没有将动画类应用于束缚元素，而是将它应用于lock元素。

因为你正在玩CSS3和SVG，我可以假设你不需要适应IE7及以下版本。因此，我们可以假设使用JS querySelector方法是安全的。

首先，我们将更新样式定义以指示该类用于动画定义（并且还将它与我们将用于选择它的束缚元素上的类分开）

将.shackle更改为CSS中的.animShackle
其次，我们需要更新滚动事件监听器，以便在提供的元素中搜索.shackle分类元素，然后将动画类应用于该元素。

更新JS

JS

window.addEventListener("scroll", function() {
  onAppear.forEach(function(elem) {
    var vwTop = window.pageYOffset;
    var vwBottom = (window.pageYOffset + window.innerHeight);
    var elemTop = elem.offsetTop;
    var elemHeight = elem.offsetHeight;
    var shackle = elem.querySelector('.shackle');

    if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) {
     shackle.classList.add("animShackle");
    } else {
      shackle.classList.remove("animShackle");
    }
  });
}, false);

<强>更新

为了使代码更具可扩展性以满足对具有自己动画的其他元素的需求，我们需要更改一些变量名称，以便它们更具通用性，并更新我们获取和设置动画类的方式。

为动画SVG添加一个通用类，以便我们可以在onAppear函数中找到它们

添加课程animatedSVG 更新querySelectorAll方法以使用新课而不是单id
更新SVG中动画元素的类名，以便我们可以在滚动onAppear.forEach方法中访问它

在HTML 中将班级.shackle更新为.animatedElement 更新elem.querySelector方法以使用新类而不是非通用.shackle
使用SVG的id属性为动画创建一个类名

添加一个名为animationClass的新变量，该变量由SVG id制作，并带有＆＃39; anim＆＃39;添附

HTML现在需要以下3件事：

SVG
id属性

class="animatedSVG"关于SVG

class="animatedElement"关于您希望动画的SVG中的元素

更新了JS

var onAppear = []; document.addEventListener("DOMContentLoaded", function() { onAppear = [].map.call(document.querySelectorAll(".animatedSVG"), function(item) { return item; }); }, false); window.addEventListener("scroll", function() { onAppear.forEach(function(elem) { var vwTop = window.pageYOffset; var vwBottom = (window.pageYOffset + window.innerHeight); var elemTop = elem.offsetTop; var elemHeight = elem.offsetHeight; var animatedElem = elem.querySelector('.animatedElement'); var animationClass = 'anim'+elem.id; if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) { animatedElem.classList.add(animationClass); } else { animatedElem.classList.remove(animationClass); } }); }, false);

DEMO

在视口上设置动画SVG元素

1 个答案: