html - 如何从左到右创建动画或制作淡入淡出的 Angular 4

Question

我想在组件打开时制作动画或淡入淡出。

这是代码

这是HTML

<div *ngIf="showMePartially" class="container">
  <div class="body-container">
</div>
</div>

这是CSS

.container {
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    transition: opacity 0.5s ease-in;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    transition: 3s;
}
.body-container {
  width: calc(100% - 73em);
  position: relative;
  left: 70em;
  top: 7.5em;
  background: white;
  height: calc(100% - 18em);
  border-radius: 4px;
  padding-left: 11px; 
  transition: opacity 0.5s ease-in;
  animation-direction: normal;
}

Answer 1

你可以使用css动画:

.body-container {
   /* above styles */
   animation: animation-name .3s ease-out forwards;
}

@keyframes animation-name {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

您可以在关键帧内制作自己的动画。这应该可以工作，因为如果条件为假，*ngIf 将从 dom 中删除元素，或者将其附加到 dom(这是动画应该工作的时候)。

编辑 对于从左到右的动画，您可以这样做:

@keyframes animation-name {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}