首页 > 代码库 > 使用CSS3动画 animation 来控制元素的显示和隐藏

使用CSS3动画 animation 来控制元素的显示和隐藏

2024-07-13 18:21:35   218人阅读

CSS3中 animation 和 transition 俩样式都能创建动画效果，而且是后台C++执行的，所以效率比普通jQuery的js模拟动画的效率高很多，所以建议大家能用css实现的效果都用css。

transition的使用比较简单，这里就不介绍了，着重为大家介绍下 animation 。

animation 的css属性有很多，本文通过 animation-name 来控制启动动画和转换动画，以下是一个通过 animation 来控制元素的显示和隐藏的例子（仅支持webkit）：

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>css3 animation</title>
  <style>
  .div{width: 200px; height: 200px; background: #f00; position: absolute;
     left: 0; -webkit-animation-fill-mode:both; -webkit-animation-duration: 1s;
  }
  .div.show{ visibility: visible; -webkit-animation-name: slideIn;}
  .div.hide{ -webkit-animation-name: slideOut;}

  html, body{height: 100%; margin:0; padding: 0;}
  .wrap{width: 960px; position: relative; height: 90%; overflow: hidden; border: 1px solid #000;}
  .btns{position: absolute; bottom: 20%;}

  @-webkit-keyframes slideIn{
    0%{left: 1500px;}
    50%{left: 100px;}
    100%{left: 0;}
  }

  @-webkit-keyframes slideOut{
    0%{left: 0;}
    50%{left: 100px;}
    100%{left: 1500px; visibility: hidden;}
  }
  </style>
</head>
<body>
  <div class="wrap">
    <div id="div" class="div"></div>
    <div class="btns">
      <button onclick="fadeIn()">出现</button>
      <button onclick="fadeOut()">隐藏</button>
    </div>
  </div>

  <script>
  function fadeIn(){
    div.classList.add(‘show‘),
    div.classList.remove(‘hide‘);
  }

  function fadeOut(){
    div.classList.add(‘hide‘),
    div.classList.remove(‘show‘);
  }
  </script>
</body>
</html>

之所以要用俩动画(slideIn和slideOut)，原因是：slideIn动画是把元素滑动进来，这时元素样式已经定为fadeIn动画100%时的样式了，就算把show样式删去也对元素没影响，所以这时要用slideOut动画把元素滑动出去才行。

-webkit-animation-fill-mode:both; 这个样式是为了动画完成后保留动画完成时的状态，如果不加这个样式的话动画完成后又会弹回原来状态了。

我的animation使用方法就介绍到这里了，各位大神有木有更好的实现方法或者建议，欢迎交流下呗~


联系
我们