Question

我想在我的asp.net网页中实现加载效果。我搜索了一下，发现了一个demo，它显示了我想要实现的目标。如果你看到演示，我想使用YouTube效果。

我检查了这个代码并试图理解。 JS

Array.prototype.slice.call( document.querySelectorAll( '#la-buttons > button' ) ).forEach( function( el, i ) {
    var anim = el.getAttribute( 'data-anim' ),
        animEl = document.querySelector( '.' + anim );

    el.addEventListener( 'click', function() {
        if( inProgress ) return false;
        inProgress = true;
        classie.add( animEl, 'la-animate' );

        setTimeout( function() {
            classie.remove( animEl, 'la-animate' );

            inProgress = false;
        }, 6000 );
    } );
} );

对应的HTML

<button data-anim="la-anim-1">YouTube</button>
<button data-anim="la-anim-2">Fill from left</button>
<button data-anim="la-anim-3">Fill from down</button>

这些容器会显示效果

<div class="la-anim-1"></div>
<div class="la-anim-2"></div>
<div class="la-anim-3"></div>

正如您在脚本中所看到的那样，他们使用setInterval函数来显示效果。但我希望当我的asp.net网页加载时应该会产生这种效果。所以我不确定如何实现它？

请建议我能够实现它。

Answer 1

我不确定但尝试使用此代码

 Array.prototype.slice.call( document.querySelectorAll( '#la-buttons > button' ) ).forEach( function( el, i ) {
var anim = el.getAttribute( 'data-anim' ),
    animEl = document.querySelector( '.' + anim );

//el.addEventListener( 'click', function() {
$(document).ready(function(){
    if( inProgress ) return false;
    inProgress = true;
    classie.add( animEl, 'la-animate' );

    setTimeout( function() {
        classie.remove( animEl, 'la-animate' );

        inProgress = false;
    }, 6000 );
} );
} );

如何在asp.net Web应用程序中实现这样的加载效果

1 个答案: