如何用CSS实现类OSX Dock缩放及AngularJS激活状态效果

嘿，这个OSX Dock风格的交互效果挺有意思的，我来帮你一步步实现它！结合AngularJS的状态绑定和CSS的过渡动画，就能轻松搞定需求~

1. 先搭好HTML结构（结合AngularJS指令） #

我们需要用AngularJS的ng-repeat渲染日期、ng-click绑定点击事件、ng-class控制激活状态，再配合表格展示对应数据：

<div ng-app="myApp" ng-controller="DateController">
  <!-- 模拟OSX Dock的日期导航栏 -->
  <div class="date-dock">
    <div 
      class="date-item" 
      ng-repeat="day in weekDays"
      ng-click="selectDate(day)"
      ng-class="{active: selectedDate === day}"
    >
      {{day.label}}
    </div>
  </div>

  <!-- 对应日期的数据表格 -->
  <table class="data-table">
    <thead>
      <tr>
        <th>项目名称</th>
        <th>状态</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in selectedDateData">
        <td>{{item.name}}</td>
        <td>{{item.status}}</td>
      </tr>
    </tbody>
  </table>
</div>

2. CSS核心：实现Dock缩放与激活状态 #

这部分是关键，用transform: scale()配合过渡动画实现悬停放大，同时给激活状态设置稍小的缩放值来区分状态——这里用transform而不是直接改字体/宽高，是因为它不会触发页面重排，动画更流畅：

/* Dock容器：横向排列+居中 */
.date-dock {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  padding: 1rem 0;
  background: #f0f0f0;
  border-radius: 10px;
  margin-bottom: 2rem;
}

/* 单个日期项基础样式 */
.date-item {
  padding: 0.8rem 1.4rem;
  cursor: pointer;
  font-size: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
  transition: all 0.2s ease-in-out; /* 平滑过渡所有变化 */
}

/* 悬停时的Dock放大效果 */
.date-item:hover {
  transform: scale(1.2); /* 悬停放大1.2倍 */
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

/* 点击后的激活状态：稍小的缩放+高亮区分 */
.date-item.active {
  transform: scale(1.1); /* 比悬停小一点，避免切换时跳变太明显 */
  background: #e3f2fd;
  font-weight: bold;
  color: #1976d2;
}

/* 表格基础样式（可选） */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th, .data-table td {
  border: 1px solid #ddd;
  padding: 0.8rem;
  text-align: left;
}

3. AngularJS控制器：处理数据与状态切换 #

在控制器里初始化日期数据、绑定选中状态，实现点击切换表格数据的逻辑：

angular.module('myApp', [])
.controller('DateController', function($scope) {
  // 初始化一周日期数据（可以根据你的实际业务调整）
  $scope.weekDays = [
    {label: '周一', date: '2024-05-20', data: [{name: '用户统计', status: '已完成'}, {name: '接口调试', status: '进行中'}]},
    {label: '周二', date: '2024-05-21', data: [{name: 'UI验收', status: '待启动'}, {name: '部署测试', status: '已完成'}]},
    {label: '周三', date: '2024-05-22', data: [{name: '需求评审', status: '进行中'}]},
    {label: '周四', date: '2024-05-23', data: []},
    {label: '周五', date: '2024-05-24', data: [{name: '版本发布', status: '待启动'}]},
    {label: '周六', date: '2024-05-25', data: []},
    {label: '周日', date: '2024-05-26', data: []}
  ];

  // 默认选中第一天
  $scope.selectedDate = $scope.weekDays[0];
  $scope.selectedDateData = $scope.selectedDate.data;

  // 点击日期切换选中状态与表格数据
  $scope.selectDate = function(day) {
    $scope.selectedDate = day;
    $scope.selectedDateData = day.data;
  };
});

额外补充：纯文本的Dock风格缩放 #

如果你的可点击元素是纯文本（没有背景容器），可以调整CSS让文本直接实现效果：

.clickable-text {
  cursor: pointer;
  font-size: 1rem;
  transition: transform 0.2s ease-in-out;
}

.clickable-text:hover {
  transform: scale(1.2);
}

.clickable-text.active {
  transform: scale(1.1);
  color: #1976d2;
  font-weight: bold;
}

这样纯文本也能拥有OSX Dock的悬停缩放和激活状态啦！

内容的提问来源于stack exchange，提问作者AJ-