如何创建一个动画从左到右或使一个褪色的角度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如果条件为假，则将从写下元素，或将其附加到写下元素（这是动画应该工作的时候）。

编辑从左到右的动画你可以这样做:

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