CSS Animation - Window

Flow
1

Hi guys,
I have a bit confusing problem. At least it is confusing for me.
I am trying to build a Notification Window:
I press a Button → A Window pops up.
So far not a big deal. But what a bad web developer would I be, if there isnt a nice animation, how the window comes in and leaves my page.
So I have my Keyframes here:

@-webkit-keyframes window-open { 0% { -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 1; } } @keyframes window-open { 0% { -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 1; } } @-webkit-keyframes window-close { 0% { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 1; } 100% { -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 1; } } @keyframes window-close { 0% { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 1; } 100% { -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 1; } }

Got a hastebin for you:
https://hastebin.com/otufacetez.css

And adding it to my scss selector like that:

.nav-header-popup.v-window { […]
&.v-window-animate-in { @include animation(window-open 0.2s 0s); } &.v-window-animate-out { @include animation(window-close 0.2x 0s); } }

Another hastebin:
https://hastebin.com/ejekaposum.coffeescript

But, after I opened the Window by “UI.getCurrent().addWindow(w);”, I somehow can’t close it anymore.
Not with “w.close();” and not with “UI.getCurrent().removeWindow(w);”.

So it looks for my like that the window is not attached to the UI. But how can this happen?
Or is it just me, who made the mistake?
Or does someone know the solution to that problem.

Thanks in advance
Lucas

2

Hi Lucas,
I had the excat same problem as you describe it (added Windows were detached from the UI and could not be closed again), I found myself that this problem is somehow connected to the kind of class (stylename) you add to the window (no additional class → no problem).
But I did not investigate further in which case styling the window actually did work (This might sound silly but have you tried to use a class without “-” in between the words [a-very-long-class → averylongclass]
or a very short class name?).

Seems to be a bug

A working example can be found [url=https://github.com/vaadin/dashboard-demo/blob/8.0/src/main/webapp/VAADIN/themes/dashboard/views/dashboardview.scss#L168]

here<
[/url]

By the way you can reduce your keyframes css by using the
bourbon
 mixin (which is included in Valo)

3

Hi Johannes,
Thanks for your answer.

Thats actually a pretty strange problem.
And my problem is not solved. i changed the selector to “nhp” but that didnt helped anything.
Also I tried it with the global v-window. That worked sometimes…(strange stuff)

Also I changed my keyframes to the bourbon stuff. Didnt changed anything.

I am sure, that I style the Window correctly with the exact selector.

Do you know if this is already a known Bug in Vaadin?

The funny thing is, after I cloned the dashboard demo and started it, the keyframe worked perfectly on the demo.
Everything a bit confusing for me.

Is there maybe someone @Vaadin that can help me with this problem?