CSS实现显示与隐藏动画效果CSS实现显示与隐藏动画效果在CSS中，可以通过 transition 和 @keyfra

CSS实现显示与隐藏动画效果

在CSS中，可以通过 transition 和 @keyframes 实现显示与隐藏的动画效果。以下是常见的几种方法：

使用 opacity 和 transition

通过 opacity 控制元素的透明度，并结合 transition 实现淡入淡出效果。

示例代码：

<div class="fade-element">这是一个会淡入淡出的元素</div>
<button onclick="toggleFade()">切换显示/隐藏</button>

<script>
  function toggleFade() {
    const element = document.querySelector('.fade-element');
    element.classList.toggle('hidden');
  }
</script>

.fade-element {
  opacity: 1; /* 默认显示 */
  transition: opacity 0.5s ease; /* 添加过渡效果 */
}

.fade-element.hidden {
  opacity: 0; /* 隐藏 */
  pointer-events: none; /* 防止点击隐藏的元素 */
}

使用 height 和 transition

通过 height 控制元素的高度，并结合 transition 实现展开和收起效果。

示例代码：

<div class="expand-element">
  <p>这是一个会展开和收起的元素。</p>
</div>
<button onclick="toggleExpand()">切换展开/收起</button>

<script>
  function toggleExpand() {
    const element = document.querySelector('.expand-element');
    element.classList.toggle('collapsed');
  }
</script>

.expand-element {
  height: auto; /* 默认展开 */
  max-height: 200px; /* 设置最大高度 */
  overflow: hidden; /* 隐藏超出部分 */
  transition: max-height 0.5s ease; /* 添加过渡效果 */
}

.expand-element.collapsed {
  max-height: 0; /* 收起 */
}

使用 transform 和 transition

通过 transform 控制元素的位移或缩放，并结合 transition 实现动画效果。

示例代码：

<div class="slide-element">这是一个会滑入滑出的元素</div>
<button onclick="toggleSlide()">切换显示/隐藏</button>

<script>
  function toggleSlide() {
    const element = document.querySelector('.slide-element');
    element.classList.toggle('hidden');
  }
</script>

.slide-element {
  transform: translateX(0); /* 默认显示 */
  transition: transform 0.5s ease; /* 添加过渡效果 */
}

.slide-element.hidden {
  transform: translateX(-100%); /* 向左滑出 */
}

使用 @keyframes 实现复杂动画

通过 @keyframes 定义动画关键帧，并结合 animation 属性实现复杂的显示与隐藏动画。

示例代码：

<div class="keyframe-element">这是一个有复杂动画的元素</div>
<button onclick="toggleAnimation()">切换显示/隐藏</button>

<script>
  function toggleAnimation() {
    const element = document.querySelector('.keyframe-element');
    element.classList.toggle('hidden');
  }
</script>

.keyframe-element {
  animation: fadeIn 0.5s ease forwards; /* 默认显示动画 */
}

.keyframe-element.hidden {
  animation: fadeOut 0.5s ease forwards; /* 隐藏动画 */
}

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

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

使用 display 和 visibility

如果需要完全隐藏元素（不占用空间），可以结合 display 和 visibility 实现动画。

示例代码：

<div class="display-element">这是一个会完全隐藏的元素</div>
<button onclick="toggleDisplay()">切换显示/隐藏</button>

<script>
  function toggleDisplay() {
    const element = document.querySelector('.display-element');
    element.classList.toggle('hidden');
  }
</script>

.display-element {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.display-element.hidden {
  opacity: 0;
  visibility: hidden;
  display: none; /* 完全隐藏，不占用空间 */
}

综合示例

以下是一个综合示例，展示多种显示与隐藏动画效果：

<div class="fade-element">淡入淡出效果</div>
<div class="expand-element">
  <p>展开收起效果</p>
</div>
<div class="slide-element">滑入滑出效果</div>
<div class="keyframe-element">关键帧动画效果</div>
<div class="display-element">完全隐藏效果</div>

<button onclick="toggleEffects()">切换所有效果</button>

<script>
  function toggleEffects() {
    document.querySelector('.fade-element').classList.toggle('hidden');
    document.querySelector('.expand-element').classList.toggle('collapsed');
    document.querySelector('.slide-element').classList.toggle('hidden');
    document.querySelector('.keyframe-element').classList.toggle('hidden');
    document.querySelector('.display-element').classList.toggle('hidden');
  }
</script>

/* 淡入淡出 */
.fade-element {
  opacity: 1;
  transition: opacity 0.5s ease;
}
.fade-element.hidden {
  opacity: 0;
  pointer-events: none;
}

/* 展开收起 */
.expand-element {
  max-height: 200px;
  overflow: hidden;
  transition: max-height 0.5s ease;
}
.expand-element.collapsed {
  max-height: 0;
}

/* 滑入滑出 */
.slide-element {
  transform: translateX(0);
  transition: transform 0.5s ease;
}
.slide-element.hidden {
  transform: translateX(-100%);
}

/* 关键帧动画 */
.keyframe-element {
  animation: fadeIn 0.5s ease forwards;
}
.keyframe-element.hidden {
  animation: fadeOut 0.5s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-20px); }
}

/* 完全隐藏 */
.display-element {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.display-element.hidden {
  opacity: 0;
  visibility: hidden;
  display: none;
}

总结

使用 opacity 和 transition 实现淡入淡出效果。
使用 height 或 max-height 实现展开收起效果。
使用 transform 实现滑入滑出效果。
使用 @keyframes 实现复杂动画。
结合 display 和 visibility 实现完全隐藏。

根据需求选择合适的方法即可！

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github