1

ここにフィドルがあります：フィドル

そのanimate: {}部分をコメントアウトし、ボタンをクリックして、それがなくても「ゼリー」アニメーションが機能することを確認します。これを使用すると、最初の読み込みアニメーションは機能しますが、ゼリーは機能しません。

PNotifyプラグインを使用しています。これが私のセットアップです：

PNotify.prototype.options.styling = "jqueryui";
var myStack = {"dir1":"down", "dir2":"left", "push":"top"};

var notification = new PNotify({
   title: "Test Title",
   text: "Test Content",
   stack: myStack,
   icon: 'glyphicon glyphicon-info-sign',
   type: 'info',
   // IF I COMMENT THIS OUT, THE "jello" effect works fine but then
   // when showing/hiding the notification it does not use the bellow effects
   animate: {
        animate: true,
        in_class: 'bounceInDown',
        out_class: 'bounceOutUp'
    },
    buttons: {
        sticker: false,
        closer_hover: false
    },
    mobile: {
        swipe_dismiss: true,
        styling: true
    },
    nonblock: {
        nonblock: false,
        nonblock_opacity: .2
    },
});

次に、「ゼリー」効果を有効にするボタンのクリックイベントがあります。

$('#clickMeButton').on('click', function() {
    // if animate above is commented out, this works, otherwise
    // this does not work
    notification.attention('jello');
});

通知が表示されたときにその効果で跳ね返る必要があり、クリックすると「ゼリー」効果を実行し、非表示/閉じるときに跳ね返る必要があります。

4

1 に答える 1

1

これは機能します

    $('#clickMeButton').on('click', function() {
        notification.get().removeClass('animated bounceInDown bounceOutUp');
        notification.attention('jello');
});

クラスを最初に削除する必要がありますが、これは PNotify ライブラリのインテンション関数では行われません。

notice.attention = function(aniClass, callback){
            notice.elem.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                notice.elem.removeClass(aniClass);
                if (callback) {
                    callback.call(notice);
                }
            }).addClass("animated "+aniClass);

PNotify ライブラリのコードを変更すると、将来の他のアニメーション プリセットの作業がより簡単になります。上記の元のコードに対するいくつかの変更を以下に示します。コメントで言及した行を追加するだけです。

notice.attention = function(aniClass, callback){
            //just add the line below
            notice.elem.removeClass(this.options.animate.in_class + " " + this.options.animate.out_class);
            notice.elem.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                notice.elem.removeClass(aniClass);
                if (callback) {
                    callback.call(notice);
                }
            }).addClass("animated "+aniClass);
        };

アテンション機能をすぐに呼び出せるようになりました

$('#clickMeButton').on('click', function() {
            notification.attention('jello');
    });
于 2016-09-22T13:27:42.780 に答える