如何从左到右创建动画或制作淡入淡出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 中删除元素，如果条件为 false，或者将其附加到 dom（这是动画应该工作的时候）。

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

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