Question

我希望在固定的延迟时间后自动填充颜色（动画之后）现在只有在我们点击它时才会填充颜色..

我希望在延迟时间后自动填充颜色

.st0{fill:#fff;;stroke:#282828;stroke-width:3;stroke-miterlimit:5;transition: .8s;}

.st0 {
    stroke-dasharray: 2000;
    stroke-dashoffset:0;
    -webkit-animation: dash 4s linear forwards;
    -o-animation: dash 4s linear forwards;
    -moz-animation: dash 4s linear forwards;
    animation: dash 4s linear forwards;
}

.st2{fill:#fff;;stroke:#282828;stroke-width:2;stroke-miterlimit:5;transition: .8s;}

.st2 {
    stroke-dasharray: 2000;
    stroke-dashoffset:0;
    -webkit-animation: dash 4s linear forwards;
    -o-animation: dash 4s linear forwards;
    -moz-animation: dash 4s linear forwards;
    animation: dash 4s linear forwards;
}

    .st1{fill:#fff;;stroke:#20b21f;stroke-width:3;stroke-miterlimit:5;transition: .8s;}

.st1 {
    stroke-dasharray: 2000;
    stroke-dashoffset:0;
    -webkit-animation: dash 4s linear forwards;
    -o-animation: dash 4s linear forwards;
    -moz-animation: dash 4s linear forwards;
    animation: dash 4s linear forwards;
}

#logo {
cursor:pointer;
}

#logo:hover .st0 {
    fill:#282828;
    stroke: #282828;
    transition: .8s;
    stroke-opacity:0.0;
}

    #logo:hover .st1 {
    fill:#20b21f;
    stroke: #20b21f;
    transition: .8s;
    stroke-opacity:0.0;
}

    #logo:hover .st2 {
    fill:#282828;
    stroke: #282828;
    transition: .8s;
    stroke-opacity:0.0;
}

#logo.clickit .st0 {
    fill:#282828;
    stroke: #282828;
    stroke-opacity:0.0;
<!--    fill-opacity:0.0;-->
}
        #logo.clickit .st1 {
    fill:#20b21f;
    stroke: #20b21f;
    stroke-opacity:0.0;
<!--    fill-opacity:0.0;-->
}
    #logo.clickit .st2 {
    fill:#282828;
    stroke: #282828;
    stroke-opacity:0.0;
<!--    fill-opacity:0.0;-->
}

@-webkit-keyframes dash {
    from {
        stroke-dashoffset: 2000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

var clicker = document.querySelector（'#logo'）; clicker.addEventListener（'click'，function（）{ this.classList.toggle（ 'clickit'）; }）;

Answer 1

在CSS动画上查看此博客条目： http://www.sitepoint.com/css3-animation-javascript-event-handlers/

作者建议css将根据您感兴趣的任何css动画状态触发Javascript事件。由于您对动画结束感兴趣，您可以使用＆＃39; animationend＆＃39;事件。所以你应该能够简单地修改你的Javascript：

var clicker = document.getElementById('logo');
clicker.addEventListener("animationend", function() {
    this.classList.toggle('clickit');
}, false);

延迟时间后自动填充颜色 - svg

1 个答案: