JavaScript(JS) DOM动态效果与动画

39252 阅读 0 评论 233 点赞

上一节我们详细讲解了表单的验证，包括信息验证、本地存储和动态渲染，本节我们将学习如何通过JS操作DOM实现元素的显示与隐藏、淡入淡出效果、滑动效果和动画效果。下面是针对每个效果的具体实现方法：

1. 元素的显示和隐藏。

显示元素：设置元素的style.display属性为"block"、"inline"或其他合适的值。例如：element.style.display = "block";

隐藏元素：设置元素的style.display属性为"none"。例如：element.style.display = "none";

有一种广告，它会先挂出来一会，然后30s后自动消失，不知道读者遇到过没有。我们也可以做一个这样的广告，通过元素的隐藏和一次性定时器来做。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dotcpp</title>
  <style>
    .advertisement {
      width: 500px;
      height: 300px;
      margin: 200px auto;
      border: 1px solid #000;
      padding: 50px 100px;
    }
  </style>
</head>
<body>
  <div class="advertisement">
    <h1>Dotcpp编程</h1>
    <p>我是广告，但是你不用担心，因为我5s后自动隐藏</p>
  </div>
</body>
<script>
  const advertisement=document.querySelector('.advertisement')//获取广告盒子
  /* 设置定时器 */
  setTimeout(() => {
    advertisement.style.display='none'
  }, 5000);
</script>
</html>

2. JS动态更改元素的透明度：

我们可以通过点击事件来触发两个盒子的透明度，从而实现淡入淡出的效果，此处需要在盒子的CSS上加“transition: opacity 0.5s;”这个会对透明度进行过渡。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>淡入淡出效果</title>
  <style>
    .fade-box {
      width: 300px;
      height: 150px;
      margin: 50px auto;
      background: lightblue;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 1;
      transition: opacity 0.5s;
    }
    button {
      padding: 10px 20px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div style="text-align: center;">
    <button onclick="fadeOut()">淡出</button>
    <button onclick="fadeIn()">淡入</button>
  </div>
 
  <div id="fadeBox" class="fade-box">
    淡入淡出效果演示
  </div>
</body>
<script>
  const fadeBox = document.getElementById('fadeBox');
  
  function fadeOut() {
    fadeBox.style.opacity = '0';
  }
  
  function fadeIn() {
    fadeBox.style.opacity = '1';
  }
</script>
</html>

3. JS实现盒子滑动的效果：

通过DOM获取元素，然后调整盒子的高度，从而实现拉窗帘的滑动效果。此处当然也需要进行transition过渡（transition: height 0.5s;）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滑动效果</title>
  <style>
    .slide-box {
      width: 300px;
      height: 0;
      margin: 50px auto;
      background: lightgreen;
      overflow: hidden;
      transition: height 0.5s;
    }
    .slide-content {
      padding: 20px;
    }
    button {
      padding: 10px 20px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div style="text-align: center;">
    <button onclick="slideDown()">向下滑动</button>
    <button onclick="slideUp()">向上滑动</button>
  </div>
 
  <div id="slideBox" class="slide-box">
    <div class="slide-content">
      滑动效果演示内容<br>
     拉窗帘滑动效果
    </div>
  </div>
</body>
<script>
  const slideBox = document.getElementById('slideBox');
  let isOpen = false;
  
  function slideDown() {
    slideBox.style.height = '150px';
    isOpen = true;
  }
  
  function slideUp() {
    slideBox.style.height = '0';
    isOpen = false;
  }
</script>
</html>

4. JS实现元素的动画效果：

首先准备４个动画（分别是滑入、弹跳、旋转和停止），再准备４个按钮和一个绿色盒子，通过点击事件触发绿色盒子的动画，主要是通过remove()移除类名和add()添加类名来实现动画的切换。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画效果</title>
  <style>
    .animate-box {
      width: 100px;
      height: 100px;
      margin: 50px auto;
      background: greenyellow;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }
    
    @keyframes slide-in {
      0% { transform: translateX(-100px); opacity: 0; }
      100% { transform: translateX(0); opacity: 1; }
    }
    
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
    }
    
    @keyframes rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .slide-in { animation: slide-in 1s ease-out; }
    .bounce { animation: bounce 0.5s ease-in-out 2; }
    .rotate { animation: rotate 2s linear infinite; }
    
    button {
      padding: 10px 20px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div style="text-align: center;">
    <button onclick="playSlide()">滑入动画</button>
    <button onclick="playBounce()">弹跳动画</button>
    <button onclick="playRotate()">旋转动画</button>
    <button onclick="stopAnimation()">停止动画</button>
  </div>
 
  <div id="animateBox" class="animate-box">
    动画效果
  </div>
</body>
<script>
  const animateBox = document.getElementById('animateBox');
  
  function playSlide() {
    resetAnimation();
    animateBox.classList.add('slide-in');
  }
  
  function playBounce() {
    resetAnimation();
    animateBox.classList.add('bounce');
  }
  
  function playRotate() {
    resetAnimation();
    animateBox.classList.add('rotate');
  }
  
  function stopAnimation() {
    resetAnimation();
  }
  
  /* 重载动画 */
  function resetAnimation() {
    animateBox.classList.remove('slide-in', 'bounce', 'rotate');
  }
</script>
</html>

总结：通过JS操作DOM动态实现元素的显示与隐藏、淡入淡出效果、滑动效果和动画效果，可以为网页增加丰富的交互体验。