cari

Rumah  >  Artikel  >  hujung hadapan web  >  关于css3多个元素依次显示效果的实现方法

关于css3多个元素依次显示效果的实现方法

小云云
小云云asal
2017-12-18 11:32:412848semak imbas

css3是css的升级版，在端端开发中我们离不开css3，在css3中，我们使用animation与keyframes结合，可以给元素添加各种各样的动画效果。这篇文章主要介绍了css3实现多个元素依次显示效果,需要的朋友可以参考下，希望能帮助到大家。

如上图所示，在许多的活动宣传html5中会经常需要用到这样的一个动画效果。特别是快到年底了，也许有同学正在为了公司的活动页面而忙碌，get到这样一个小技能说不定刚好对你有帮助哦。

在css3中，我们使用animation与keyframes结合，可以给元素添加各种各样的动画效果。具体的动画，在keyframes中定义，在animation中使用。例如可以定义一个从上飞入的动画效果。

@keyframes topIn {
  from { transform: translateY(-50px) }
  to { transform: translateY(0px) }
}

并在目标元素中通过animation来使用动画。

<p class="target topIn"></p>
.topIn {
  animation: topIn 1s ease;
}

这样，当元素第一次渲染进入DOM时，就会有一个从上到下的位移动画效果。当然，这种效果并不是我们想要的。往往我们还在在动画上加上一个透明度从0到1的渐变。

@keyframes topIn {
  from { 
    transform: translateY(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateY(0px);
    opacity: 1; 
  }
}

我们还希望能够控制元素的显示时机应该怎么办？简单一点的办法就是在需要动画效果展示时，才给目标元素添加控制动画的class样式。

btn.addEventListener(&#39;click&#39;, function() {
  document.querySelector(&#39;.target&#39;).classList.add(&#39;topIn&#39;);
}, !1);

但是这样做有一个问题。我相信实践过的朋友都已经发现过的。我们期望元素在入场之前，是处于看不见的状态。但是仅仅只是上面的做法，动画开始前元素是能够被看见的。那么应该怎么办？

我们可以很简单的想到，给元素添加 display: none 或者 visibility: hidden 。但是由于 display: none 之后，元素是不占位的。因此如果这样的话，会导致页面布局出现混乱。所以我们在开始之前，给元素添加一个新的class。

.aninode {
  visibility: hidden;
}

并且添加一个新的class让元素显示出来。

.animated .aninode {
  visibility: visible;
}

控制动画效果的class也在css上进行一些调整。

.animated .topIn {
  animation: topIn 1s ease;
}

这样做的好处是，我们只需要在class中添加一个 animated ，就能够达到我们的效果。实例demo完整代码如下：

<p class="container">
  <p class="target aninode leftIn"></p>
  <button class="btn show">show</button>
  <button class="btn hide">hide</button>
</p>
.container {
  width: 100px;
  margin: 0 auto;
}
.aninode {
  visibility: hidden;
}
.animated .aninode {
  visibility: visible;
}
.target {
  width: 100px;
  height: 100px;
  background: orange;
  border-radius: 4px;
  margin: 20px 0;
}
.animated .topIn {
  animation: topIn 1s ease;
}
.animated .leftIn {
  animation: leftIn 1s ease;
}
.btn {
  width: 100px;
  height: 30px;
  border: 1px solid #ccc;
  outline: none;
  transition: 0.1s;
}
.btn:active {
  border: none;
  background: orange;
  color: #fff;
}
@keyframes topIn {
  from { 
    transform: translateY(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateY(0px);
    opacity: 1; 
  }
}
@keyframes leftIn {
  from { 
    transform: translateX(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateX(0px);
    opacity: 1; 
  }
}
var show = document.querySelector(&#39;.show&#39;);
var hide = document.querySelector(&#39;.hide&#39;);
var container = document.querySelector(&#39;.container&#39;);
show.addEventListener(&#39;click&#39;, function() {
  container.classList.add(&#39;animated&#39;);
}, !1);
hide.addEventListener(&#39;click&#39;, function() {
  container.classList.remove(&#39;animated&#39;);
}, !1);

Demo显示如下：

See the Pen <a href=&#39;https://codepen.io/yangbo5207/pen/NXKrPg/&#39;>NXKrPg</a> by Ormie (<a href=&#39;https://codepen.io/yangbo5207&#39;>@yangbo5207</a>) on <a href=&#39;https://codepen.io&#39;>CodePen</a>.

codepen demo 地址

但是这样离我们想要的效果好像还差一点点。继续思考。首先想要后面的元素比前一个元素晚一点出现，那么肯定是要控制延迟时间，我们就必须有许多设置延迟时间的class。

.delay200 {
    animation-delay: 200ms;
    animation-fill-mode: backwards!important;
}
.delay400 {
    animation-delay: 400ms;
    animation-fill-mode: backwards!important;
}
.delay600 {
    animation-delay: 600ms;
    animation-fill-mode: backwards!important;
}
.delay800 {
    animation-delay: 800ms;
    animation-fill-mode: backwards!important;
}

animation-fill-mode: backwards!important; 的目的是为了元素在出现之前，保持透明度为0的状态。防止当添加 animated 之后元素直接出现了。

加 !important 是为了防止在新的class中使用animation简写时对 animation-fill-mode 的属性进行覆盖改写。如果此处不写 !important 的话，那么在 topIn 这样的动画class中就不能使用简写形式。

这样之后，我们只需要在css中添加上上述代码，并对html做一些改动，就能够实现我们想要的效果了。

See the Pen <a href=&#39;https://codepen.io/yangbo5207/pen/mpbEEE/&#39;>mpbEEE</a> by Ormie (<a href=&#39;https://codepen.io/yangbo5207&#39;>@yangbo5207</a>) on <a href=&#39;https://codepen.io&#39;>CodePen</a>.

codepen demo 地址

完整代码如下：

<p class="container">
  <p class="targets aninode">
      <p class="item leftIn">春晓</p>
      <p class="item leftIn delay200">春眠不觉晓</p>
      <p class="item leftIn delay400">处处蚊子咬</p>
      <p class="item leftIn delay600">夜来风雨声</p>
      <p class="item leftIn delay800"><此处请留下你们的才华></p>
  </p>
  <button class="btn show">show</button>
  <button class="btn hide">hide</button>
</p>
.container {
  width: 200px;
  margin: 0 auto;
}
.aninode {
  visibility: hidden;
}
.animated .aninode {
  visibility: visible;
}
.targets {
  margin: 20px 0;
}
.targets .item {
    border: 1px solid #ccc;
    margin: 10px 0;
    line-height: 2;
    padding: 2px 6px;
    border-radius: 4px;
}
.animated .topIn {
  animation: topIn 1s ease;
}
.animated .leftIn {
  animation-name: leftIn;
  animation-duration: 1s;
}
.btn {
  width: 100px;
  height: 30px;
  border: 1px solid #ccc;
  outline: none;
  transition: 0.1s;
}
.btn:active {
  border: none;
  background: orange;
  color: #fff;
}
@keyframes topIn {
  from { transform: translateY(-50px) }
  to { transform: translateY(0px) }
}
@keyframes leftIn {
  from { 
    transform: translateX(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateX(0px);
    opacity: 1; 
  }
}
.delay200 {
    animation-delay: 200ms;
    animation-fill-mode: backwards!important;
}
.delay400 {
    animation-delay: 400ms;
    animation-fill-mode: backwards!important;
}
.delay600 {
    animation-delay: 600ms;
    animation-fill-mode: backwards!important;
}
.delay800 {
    animation-delay: 800ms;
    animation-fill-mode: backwards!important;
}
var show = document.querySelector(&#39;.show&#39;);
var hide = document.querySelector(&#39;.hide&#39;);
var container = document.querySelector(&#39;.container&#39;);
show.addEventListener(&#39;click&#39;, function() {
  container.classList.add(&#39;animated&#39;);
}, !1);
hide.addEventListener(&#39;click&#39;, function() {
  container.classList.remove(&#39;animated&#39;);
}, !1);

我们发现js的逻辑并没有发生任何改变。仍然仅仅只是在合适的位置添加/删除animated。

彩蛋：

在实践中我们还会遇到一个比较麻烦的事儿。就是延迟class的编写。我们可能并不知道会使用到那些时差，有多少个元素会使用到，如果都用手来写的话，重复工作确实太过麻烦。因此我们可以使用js动态插入。代码如下：

const styleSheet = getSheet();
var delay = 100;
while (delay < 10000) {
    styleSheet.insertRule(`.animated .delay${delay}{ animation-delay: ${delay}ms; animation-fill-mode: backwards; }`, styleSheet.cssRules.length);
    delay += delay < 3000 ? 100 : 1000;
}
function getSheet() {
    var sheets = document.styleSheets;
    var len = sheets.length;
    for(var i = 0; i <= len; i++) {
        var sheet = sheets.item(i);
        try {
            if (sheet.cssRules) {
                return sheet;
            }
        } catch(e) {} 
    }
    var style = document.createElement(&#39;style&#39;);
    style.type = "text/css";
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(style);
    return style.sheet;
}

相关推荐：

php向数组尾部插入一个或多个元素的函数array_push()

JavaScript向数组的末尾添加一个或多个元素并返回新的长度的方法push()

PHP输出多个元素的排列组合_PHP教程

Atas ialah kandungan terperinci 关于css3多个元素依次显示效果的实现方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css3实现多个元素依次显示效果_css3_CSS_网页制作Artikel seterusnya：详解css中href和src、link和@import的区别

Artikel berkaitan

Lihat lagi