要实现两个 <div> 元素中的文本自动间隔一段时间上下翻转交替显示，你可以使用 Vue.js 来控制显示逻辑，并使用 CSS 动画来处理过渡效果。以下是一个基本的实现方法：
- HTML 结构：保持你的 HTML 结构不变，但添加一个容器来包裹这两个
<div>。 - CSS 样式：添加 CSS 来处理动画效果，并设置
.card元素的初始和最终状态。 - Vue.js 逻辑：使用 Vue.js 的数据绑定和生命周期钩子来控制切换逻辑。
以下是完整的代码示例：
HTML
html复制代码
<div id="app">
<div class="card-container">
<div class="card" v-bind:class="{ active: isActive }">
<span class="span-top office-hours">正常办公时间：</span>
<span class="span-bottom">周一至周五 09:00-12:00 14:00-17:00</span>
</div>
<div class="card" v-bind:class="{ active: !isActive }">
<span class="span-top office-hours">延时服务时间：</span>
<span class="span-bottom">周一至周五 8:30-9:00 12:00-14:00 17:00-17:30 周六8:30-12:30</span>
</div>
</div>
</div>
CSS
css复制代码
.card-container {
position: relative;
height: 100px; /* 根据你的需要调整高度 */
overflow: hidden;
}
.card {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.5s ease-in-out; /* 控制动画时间 */
transform: translateY(100%); /* 初始状态在上方隐藏 */
}
.card.active {
transform: translateY(0); /* 最终状态在可视区域 */
}
Vue.js
javascript复制代码
new Vue({
el: '#app',
data: {
isActive: true, // 控制哪个 card 是 active 的
intervalId: null // 存储 setInterval 的 ID
},
mounted() {
// 在组件挂载后开始切换动画
this.intervalId = setInterval(() => {
this.isActive = !this.isActive;
}, 3000); // 每3秒切换一次
},
beforeDestroy() {
// 在组件销毁前清除定时器
clearInterval(this.intervalId);
}
});
解释
- HTML：两个
.card元素分别包含不同的文本信息，并包裹在一个.card-container中。 - CSS：
.card-container设置了固定的高度和overflow: hidden来隐藏超出的内容。.card元素使用了position: absolute和transform: translateY来实现上下滑动的效果。.active类用于控制哪个.card是可见的。 - Vue.js：在
data中定义了一个isActive变量来控制哪个.card是活动的，以及一个intervalId来存储定时器的 ID。在mounted钩子中，使用setInterval每3秒切换一次isActive的值。在beforeDestroy钩子中，清除定时器以防止内存泄漏。
这样，你就可以实现两个文本块自动间隔一段时间上下翻转交替显示的效果了
