Question

我正在开发一个Vaadin应用程序，我有点混乱的问题。至少这对我来说很困惑。我正在尝试构建通知窗口：

我按下按钮 - ＆gt;弹出一个窗口。

到目前为止还没什么大不了的。但是，如果没有一个好的动画，窗口是如何进入并离开我的页面的，那么我将成为一个糟糕的Web开发人员。所以我在这里有我的关键帧：

@-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;
  }
}

将它添加到我的scss选择器中：

.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);
    }
  }

但是，在我通过“UI.getCurrent（）。addWindow（w）;”打开Window之后，我不知道怎么回事了。不是用“w.close（）;”而不是“UI.getCurrent（）。removeWindow（w）;”。

因此我认为窗口没有附加到UI。但这怎么可能发生呢？或者只是我，谁犯了错误？或者有人知道该问题的解决方案。

提前致谢

卢卡斯

Vaadin - CSS动画 - 窗口不可关闭

0 个答案: