yyyyfly

yyyyfly

关注
发信
关注(28)粉丝(399)

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

CSS过渡是什么

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

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

以下是一个简单的例子：

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

<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. duration：可以设置过渡的持续时间，默认值为 undefined，它会使用内部过渡类提供的默认持续时间。
  7. enter-class：指定进入过渡的CSS类名，默认值为"v-enter"。
  8. enter-active-class：指定进入过渡的活动CSS类名，默认值为"v-enter-active"。
  9. enter-to-class：指定进入过渡的目标CSS类名，默认值为"v-enter-to"。
  10. leave-class：指定离开过渡的CSS类名，默认值为"v-leave"。
  11. leave-active-class：指定离开过渡的活动CSS类名，默认值为"v-leave-active"。
  12. 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来覆盖过渡过程中的样式。

@keyframes是什么

@keyframes是CSS中用于创建动画的关键帧规则。它允许开发者定义在动画过程中元素的不同状态，并指定每个状态的样式属性。通过使用@keyframes，可以创建复杂的动画效果，如渐变、旋转、缩放等。

使用@keyframes，可以定义动画的关键帧，即动画的不同状态。每个关键帧由一个百分比值（0%到100%）和对应的样式属性组成。在动画过程中，浏览器会根据关键帧的定义自动计算中间状态的样式属性。

以下是一个使用@keyframes创建动画的示例：

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.element {
  animation: fadeIn 1s;
}

在上面的示例中，我们定义了一个名为fadeIn的关键帧规则。它包含两个关键帧：0%和100%。在0%关键帧中，元素的透明度为0；在100%关键帧中，元素的透明度为1。通过将fadeIn关键帧应用到元素的animation属性中，我们可以使元素在1秒内从透明度0渐变到透明度1，实现淡入效果。

@keyframes还支持更复杂的动画效果，可以定义多个关键帧，并在每个关键帧中指定多个样式属性。通过在关键帧之间设置合适的百分比值，可以控制动画的速度和过渡效果。

总结来说，@keyframes是CSS中用于创建动画的关键帧规则。它允许开发者定义动画的不同状态和样式属性，并通过将关键帧应用到元素的animation属性中，实现各种复杂的动画效果。

08-16 07:41
Powered by LMLPHP ©2024 yyyyfly 0.006195