Animations

[gen4sp]

Can i add animation to showing and hiding messages? How is it possible? Thanks you

[Drewster727]

@banya --> That link/issue you posted doesn't exist?

I also would love to see this plugin with animation capability. Is there any way we can just utilize css3 animations to get this done in the meantime?

Thanks,

-Drew

[zackbloom]

You absolutely can, CSS animations can do whatever wiggle or slide you can think of when the message element is added to the page.

Way back when there was a branch which added support for animate.css, a library that allows you to animate anything with the right css classes. I believe that the only change that has to be made for this to work is the ability to add extra classes to messages.

[Drewster727]

thanks for the reply:

so I'm using the following transition css:

ul.messenger li.messenger-message-slot { opacity: 1; -webkit-transition: opacity 2.5s ease-out, -webkit-transform 2.5s ease-out; -moz-transition: opacity 2.5s ease-out, -moz-transform 2.5s ease-out; -o-transition: opacity 2.5s ease-out, -o-transform 2.5s ease-out; transition: opacity 2.5s ease-out, transform 2.5s ease-out; }

How can I adapt that to work with messenger? The plugin seems to automatically display the messages and ignore the transition.

thanks!

[zackbloom]

That's a CSS transition. It could only really work if messenger rendered the message, forced a repaint, then applied a class you could transition to. This is not supported right now.

You can however use CSS animations, e.g. https://github.com/daneden/animate.css/blob/master/source/bouncing_entrances/bounceIn.css

[seifsallam]

@zackbloom That is awesome. Is there a way to do animation while dismissing too?

[zackbloom]

@seifsallam Yes, when we hide a message we apply the messenger-hidden class, so if you add an animation to that class, it will animate on hide.

[seifsallam]

@zackbloom I've tried adding animation there but no luck, it just disappears

[zackbloom]

Make sure you're overriding the built-in themes which make messenger-hidden actually hide the messages.

Something like

.messenger-hidden {
  display: block !important;
}

would be worth trying.

[zackbloom]

Truthfully though, none of this will work particularly well if there is more than one message shown at a time. @adamschwartz has some ideas about how we might add more robust support.

[seifsallam]

Not working either, but thanks

[codecowboy]

Did anyone get this working?

[torrobinson]

Even if unofficial, a third party plugin/addition that added subtle animations/fades would be awesome.

[MithrilMan]

I've an Idea that worked for me, but it's a quirk code at the moment

in the messenger.js search for line this.$message.addClass('messenger-will-hide-after');

and after that add this

////mia aggiunta
            if (this.options.hideAfter > 1) {
               this._hidingTimeout = setTimeout(function () {
                  _this.$message.addClass('messenger-hiding');
               }, (this.options.hideAfter * 1000) - 1000);
            }
////fine mia aggiunta

and search for this.$message.removeClass('messenger-hidden');

and chang it to this.$message.removeClass('messenger-hidden').removeClass('messenger-hiding');

shortly, if hideAfter > 1 second, then before 1 second it trigger my custom function and add the class
messenger-hiding

add that point, in your css you can do whatever effect you want to dismiss the dialog, knowing that you have 1 second to do that

of coure this solution suck because it's tailored on my needs of the moment, the right thing (very easy tbh) is to add another timer that trigger before _hidingTimeout

(_hidingTimeout could even be triggered inside this new timed function)

my css was this

 ul.messenger .messenger-message {
        overflow: hidden;
        *zoom: 1;
        opacity: 1;
        /* Firefox */
        -moz-transition-property: opacity;
        -moz-transition-duration: 0.5s;
        /* WebKit */
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 0.5s;
        /* Opera */
        -o-transition-property: opacity;
        -o-transition-duration: 0.5s;
        /* Standard */
        transition-property: opacity;
        transition-duration: 0.5s;
    }

        ul.messenger .messenger-message.messenger-hiding {
            opacity: 0;
        }

if i find the time i could fork, change and pull-request