【技术积累】Vue.js中的CSS过渡【一】

CSS过渡是什么

在Vue中，可以使用<transition>组件来实现CSS过渡效果。CSS过渡是指在元素的状态发生改变时，通过添加或移除CSS类来实现平滑的过渡效果。

<transition>组件可以包裹需要过渡的元素，并通过name属性指定过渡效果的名称。然后，可以使用CSS样式来定义过渡的效果。

以下是一个简单的例子：

<template>
    <transition name="fade-in" appear>
        <ARow v-if="show">
            <ACol>
                <div class="info-card">
                    <div class="info-title">
                        数据总和
                    </div>
                    <div class="info-value">
                        100
                    </div>
                </div>
            </ACol>
        </ARow>
    </transition>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const show = ref(false);

// 在需要的时候触发过渡效果
setTimeout(() => {
    show.value = true;
}, 1000);
</script>

<style scoped>
.fade-in-enter-active {
    animation: fade-in 1s;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.info-card {
    width: 318px;
    height: 116px;
    background-color: #bebebe;
    box-shadow: 0px 2px 10px 1px rgba(23,179,163,0.07);
    border-radius: 4px;
}

.info-title {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 21px;
    padding: 20px 0 20px 30px;
}

.info-value {
    font-size: 36px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    line-height: 21px;
    padding: 0 0 0 30px;
}
</style>

这段代码实现了一个简单的渐入效果的过渡动画，通过控制 show 的值来触发过渡效果的显示

在CSS中，.fade-enter-active和.fade-leave-active类定义了过渡的持续时间和动画效果。.fade-enter和.fade-leave-to类定义了元素进入和离开时的初始和最终状态。

通过使用<transition>组件和CSS样式，可以实现各种过渡效果，如淡入淡出、滑动、缩放等。可以根据具体需求来定义不同的过渡效果。

CSS过渡的书写格式是什么

在Vue中使用CSS过渡的步骤和格式如下：

步骤一：定义过渡样式

在Vue的组件中，可以使用<style>标签来定义过渡样式。在Vue 3中，可以使用<style scoped>来限定样式的作用域。

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

步骤二：使用过渡组件

在Vue的组件中，可以使用过渡组件来包裹需要过渡的元素。在Vue 3中，可以使用<transition>组件来实现过渡效果。

<template>
  <transition name="fade">
    <div v-if="show" class="fade">
      <!-- 过渡的内容 -->
    </div>
  </transition>
</template>

步骤三：触发过渡效果

在Vue的组件中，可以通过改变数据来触发过渡效果。在Vue 3中，可以使用v-if或v-show指令来控制元素的显示和隐藏。

<script setup lang="ts">
import { ref } from 'vue'

const show = ref(false)
</script>

<template>
  <button @click="show = !show">Toggle</button>
  <transition name="fade">
    <div v-if="show" class="fade">
      <!-- 过渡的内容 -->
    </div>
  </transition>
</template>

以上就是在Vue中使用CSS过渡的步骤和格式。通过导入过渡组件、定义过渡样式、使用过渡组件和触发过渡效果，可以实现元素的过渡效果。

transition标签及其属性

在Vue中，<transition>标签用于在元素插入或删除时应用过渡效果。它可以包裹任何元素或组件，并通过添加CSS类来实现过渡效果。

<transition>标签有以下属性：

1. name：指定过渡的名称，用于自动生成过渡类名，默认值为"v"。
2. appear：指定是否在初始渲染时应用过渡，默认值为false。
3. css：指定是否使用CSS过渡，默认值为true。
4. type：指定过渡的模式，可以是"transition"（默认）或"animation"。
5. mode：指定过渡的模式，可以是"in-out"（默认）、"out-in"或"default"。
6. enter-class：指定进入过渡的CSS类名，默认值为"v-enter"。
7. enter-active-class：指定进入过渡的活动CSS类名，默认值为"v-enter-active"。
8. enter-to-class：指定进入过渡的目标CSS类名，默认值为"v-enter-to"。
9. leave-class：指定离开过渡的CSS类名，默认值为"v-leave"。
10. leave-active-class：指定离开过渡的活动CSS类名，默认值为"v-leave-active"。
11. leave-to-class：指定离开过渡的目标CSS类名，默认值为"v-leave-to"。

transition的钩子函数

除了以上属性，<transition>标签还可以使用以下事件钩子函数：

1. before-enter：在进入过渡之前触发。
2. enter：在进入过渡之后触发。
3. after-enter：在进入过渡完成之后触发。
4. enter-cancelled：在进入过渡被取消之后触发。
5. before-leave：在离开过渡之前触发。
6. leave：在离开过渡之后触发。
7. after-leave：在离开过渡完成之后触发。
8. leave-cancelled：在离开过渡被取消之后触发。

通过使用<transition>标签及其属性，可以轻松地为Vue应用中的元素添加过渡效果，提升用户体验。

下面是一个使用<transition>的详细案例，使用<script setup lang="ts">来书写：

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @leave-cancelled="leaveCancelled">
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const show = ref(false);

const toggle = () => {
  show.value = !show.value;
};

const beforeEnter = (el) => {
  el.style.opacity = 0;
};

const enter = (el, done) => {
  el.style.transition = 'opacity 1s';
  el.style.opacity = 1;
  el.addEventListener('transitionend', done);
};

const afterEnter = (el) => {
  el.style.transition = '';
};

const enterCancelled = (el) => {
  el.style.opacity = '';
};

const beforeLeave = (el) => {
  el.style.opacity = 1;
};

const leave = (el, done) => {
  el.style.transition = 'opacity 1s';
  el.style.opacity = 0;
  el.addEventListener('transitionend', done);
};

const afterLeave = (el) => {
  el.style.transition = '';
};

const leaveCancelled = (el) => {
  el.style.opacity = '';
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.box {
  width: 200px;
  height: 200px;
  background-color: red;
}
</style>

在上面的案例中，我们使用了<transition>组件来包裹一个具有过渡效果的元素。点击按钮时，通过改变show的值来控制元素的显示和隐藏。

在钩子函数中，我们可以根据需要设置元素的初始状态、过渡效果以及执行额外的操作。例如，在beforeEnter钩子函数中，我们设置元素的初始透明度为0；在enter钩子函数中，我们设置元素的过渡效果，并在过渡效果执行完毕后调用done函数；在afterEnter钩子函数中，我们清除元素的过渡效果。

通过使用这些钩子函数，我们可以实现自定义的过渡效果，并在过渡的不同阶段执行相应的操作。

CSS过渡的预定义样式是什么

在Vue中，CSS过渡的预定义样式是通过<transition>组件来实现的。<transition>组件提供了一些预定义的类名，用于在过渡过程中添加或移除CSS类。

以下是Vue中CSS过渡的预定义样式：

1. v-enter：在元素插入之前添加，插入过渡的开始状态。
2. v-enter-active：在元素插入之前添加，插入过渡的过程状态。
3. v-enter-to：在元素插入之后添加，插入过渡的结束状态。
4. v-leave：在元素移除之前添加，移除过渡的开始状态。
5. v-leave-active：在元素移除之前添加，移除过渡的过程状态。
6. v-leave-to：在元素移除之后添加，移除过渡的结束状态。

这些类名可以通过设置name属性来自定义，例如<transition name="fade">，则对应的类名为fade-enter、fade-enter-active、fade-enter-to、fade-leave、fade-leave-active、fade-leave-to。

通过在CSS中定义这些类名的样式，可以实现元素在插入或移除时的过渡效果。例如，可以设置v-enter的opacity为0，v-enter-active的transition属性为opacity 0.5s，v-enter-to的opacity为1，这样在元素插入时就会有一个淡入的过渡效果。

需要注意的是，这些类名只在过渡过程中存在，过渡结束后会被移除。如果需要在过渡结束后保持某些样式，可以使用v-enter-to或v-leave中的!important来覆盖过渡过程中的样式。