Question

是否可以从display：none设置css值：在第二个动画开始时阻止没有JAVASCRIPT ？谢谢。这是我到目前为止的地方：https://codepen.io/anon/pen/NyMmNm

HTML：

<main>
  <h1>Hello World</h1>
  <p>Lorem ipsum dolor</p>
</main>

CSS：

h1{
  margin: 0;
  margin-bottom: 3em;
  animation-name: h1FadeIn;
  animation-duration: 1s;
}

p{
  margin: 0;
  display: none;
  animation-name: pFadeIn;
  animation-duration: 1s;
  animation-delay: 1s;
}


@keyframes h1FadeIn{
  from{ opacity: 0;margin-bottom: 0em; }
  to{ opacity: 1;margin-bottom: 3em; }
}

@keyframes pFadeIn{
  from{ opacity: 0;margin-left: 3em;display: block; }
  to{opacity: 1;margin-left: 0em;display: block; }
}

Answer 1

这样可行。

STYLE CSS：

<v-navigation-drawer v-model="drawer" temporary absolute>

BODY HTML：

<style>
h1{
  animation-name: h1FadeIn;
  animation-duration: 1s;
}

p{
  opacity:0;
  animation-name: pFadeIn;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes h1FadeIn{
  from{ opacity: 0;margin-left: 3em; }
  to{ opacity: 1;margin-left: 0em; }
}

@keyframes pFadeIn{
  from{ opacity: 0;margin-left: 3em; }
  to{ opacity: 1;margin-left: 0em; }
}
</style>

CSS动画：在第二个动画开始时完成第一个动画集显示块后没有JAVASCRIPT

1 个答案: