css之fade 动画效果

1.transition–group

transition-group官方文档

<TransitionGroup> 是一个内置组件，用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。

2.代码

 <div class="senior-panel">
      <transition-group name="fade">
        <ProductAsserts
          v-if="currentTab === 'tabTopPic'"
          ref="tabTopPic"
          key="tabTopPic"
          pictype="product_video"
        />

        <ProductAsserts
          v-if="currentTab === 'tabFullPic'"
          ref="tabFullPic"
          key="tabFullPic"
          pictype="product_fullscreen_image"
        />

        <Music v-if="currentTab === 'tabMusic'" ref="tabMusic" key="tabMusic" /&gt;

      </transition-group>
    </div>

 /** 插入过程 **/
.fade-enter-active{
  transition: all 1s;
}
/** 移除过程 **/
.fade-leave-active {
  transition: all 0.1s;
}
/*** 开始插入、移除结束的位置变化 ***/
.fade-enter, .fade-leave-to {
  opacity: 0;
  transform: translateX(15px);
}

3.说明transition

当涉及到网页设计和 CSS 样式时，”transition“（过渡）是一种能够控制 CSS 属性变化平滑性和时间的特性。它使得当 CSS 属性的值发生改变时，可以以一个指定的时间段内逐渐变化。

### 语法：

transition: 属性名称 过渡时间 过渡方式 延迟时间;

– **属性名称：** 指定要应用过渡效果的 CSS 属性。例如，`transition: opacity;` 将应用过渡效果到 `opacity` 属性上。
– **过渡时间：** 指定过渡效果持续的时间。单位可以是秒（s）或毫秒（ms）。例如，`transition: opacity 1s;` 将过渡时间设为1秒。
– **过渡方式：** 定义过渡效果的加速曲线。它决定了在一段时间内被改变的属性中间值是如何计算的。常见的过渡方式有 `ease`、`linear`、`ease-in`、`ease-out` 和 `ease-in-out`。
– **延迟时间（可选）：** 指定在过渡效果开始之前等待的时间。

### 工作原理：

当一个 CSS 属性（比如因为鼠标悬停、类名改变、JavaScript 事件等触发）被改变，并且被包含在一个 `transition` 规则中时，属性的改变会在指定的时间段内逐渐发生。比如：

div {
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}

div:hover {
  opacity: 0.5;
}

这段 CSS 会在一个 `div` 元素上创建一个 `opacity` 属性的过渡效果。当鼠标悬停在这个 `div` 上时，`opacity` 会从 `1` 渐变到 `0.5`，过程持续0.5秒，采用了一个 ease-in-out 的过渡方式。

### 实际应用：

过渡常用于悬停效果、平滑动画和使得用户界面变化更加视觉上吸引人。可以应用于各种属性，比如 `opacity`、`width`、`height`、`color`、`transform` 等，创造出多样化的效果。

例如，可以使用过渡实现平滑显示下拉菜单、元素的淡入淡出效果、按钮的悬停动画，或者创建元素进入或离开屏幕时的滑动动画。

4.transform

`transform` 是一个在 CSS 中用来改变元素视觉呈现的属性。它允许你对元素进行旋转、缩放、移动、倾斜等变换，而不会影响文档的布局流。

### 常见的 `transform` 值：

1. **`translate()`：** 在水平和垂直方向上移动元素。例如：`translate(50px, 100px);` 将元素向右移动50像素，向下移动100像素。
2. **`scale()`：** 缩放元素的大小。例如：`scale(1.5);` 将元素放大到原来大小的1.5倍。
3. **`rotate()`：** 旋转元素。例如：`rotate(45deg);` 将元素顺时针旋转45度。
4. **`skew()`：** 对元素进行倾斜变换。例如：`skew(30deg, 20deg);` 将元素水平方向倾斜30度，垂直方向倾斜20度。

### 用法示例：

.box {
  transform: translate(50px, 50px) rotate(45deg);
}

这个例子会将类名为 `.box` 的元素向右下方移动50像素，然后顺时针旋转45度。

### 与过渡（Transitions）和动画（Animations）的关系：

`transform` 常常与过渡和动画一起使用，使得元素在改变样式时产生平滑的动画效果。结合 `transition` 属性，你可以设置过渡的持续时间、动画速度曲线等。与 `keyframes` 结合使用，你可以创建更复杂的动画序列。

例如：

.box {
  transition: transform 0.3s ease-in-out;
}

.box:hover {
  transform: scale(1.2);
}

这段 CSS 会创建一个 `.box` 元素，当鼠标悬停时会将其放大到原大小的1.2倍，过程持续0.3秒，采用了一个 ease-in-out 的过渡方式。

代码007普通

打赏 收藏 海报 链接