如何从左到右创建动画或使Angular 4淡入淡出 [英] How to create an animation from left to right or making a fade Angular 4

问题描述

我希望在打开组件时制作动画或淡入淡出.

I want when the component is open to make an animation or to make a fade.

这是代码

这是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;
}

推荐答案

您可以使用CSS动画:

You can use css animation:

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

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

您可以在关键帧内制作自己的动画.这应该可行，因为 * ngIf 会在条件为false时从dom中删除元素，或将其附加到dom中(这是动画应该起作用的时间).

You can make your own animation inside of keyframes. This should work, because *ngIf will either remove element from dom, if condition is false, or append it into dom(this is when animation should work).

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

EDIT For left to right animation you can do like:

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

这篇关于如何从左到右创建动画或使Angular 4淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！