经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
【技术积累】Vue.js中的CSS过渡【一】
来源:cnblogs  作者:程序员天佑  时间:2023/8/16 9:14:14  对本文有异议

CSS过渡是什么

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

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

以下是一个简单的例子:

  1. <template>
  2. <transition name="fade-in" appear>
  3. <ARow v-if="show">
  4. <ACol>
  5. <div class="info-card">
  6. <div class="info-title">
  7. 数据总和
  8. </div>
  9. <div class="info-value">
  10. 100
  11. </div>
  12. </div>
  13. </ACol>
  14. </ARow>
  15. </transition>
  16. </template>
  17. <script setup lang="ts">
  18. import { ref } from 'vue';
  19. const show = ref(false);
  20. // 在需要的时候触发过渡效果
  21. setTimeout(() => {
  22. show.value = true;
  23. }, 1000);
  24. </script>
  25. <style scoped>
  26. .fade-in-enter-active {
  27. animation: fade-in 1s;
  28. }
  29. @keyframes fade-in {
  30. from {
  31. opacity: 0;
  32. transform: translateX(-100px);
  33. }
  34. to {
  35. opacity: 1;
  36. transform: translateY(0);
  37. }
  38. }
  39. .info-card {
  40. width: 318px;
  41. height: 116px;
  42. background-color: #bebebe;
  43. box-shadow: 0px 2px 10px 1px rgba(23,179,163,0.07);
  44. border-radius: 4px;
  45. }
  46. .info-title {
  47. font-size: 18px;
  48. font-family: Microsoft YaHei;
  49. font-weight: 400;
  50. color: #333333;
  51. line-height: 21px;
  52. padding: 20px 0 20px 30px;
  53. }
  54. .info-value {
  55. font-size: 36px;
  56. font-family: Microsoft YaHei;
  57. font-weight: bold;
  58. color: #333333;
  59. line-height: 21px;
  60. padding: 0 0 0 30px;
  61. }
  62. </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>来限定样式的作用域。

  1. <style scoped>
  2. .fade-enter-active, .fade-leave-active {
  3. transition: opacity 0.5s;
  4. }
  5. .fade-enter, .fade-leave-to {
  6. opacity: 0;
  7. }
  8. </style>

步骤二:使用过渡组件

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

  1. <template>
  2. <transition name="fade">
  3. <div v-if="show" class="fade">
  4. <!-- 过渡的内容 -->
  5. </div>
  6. </transition>
  7. </template>

步骤三:触发过渡效果

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

  1. <script setup lang="ts">
  2. import { ref } from 'vue'
  3. const show = ref(false)
  4. </script>
  5. <template>
  6. <button @click="show = !show">Toggle</button>
  7. <transition name="fade">
  8. <div v-if="show" class="fade">
  9. <!-- 过渡的内容 -->
  10. </div>
  11. </transition>
  12. </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">来书写:

  1. <template>
  2. <div>
  3. <button @click="toggle">Toggle</button>
  4. <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">
  5. <div v-if="show" class="box"></div>
  6. </transition>
  7. </div>
  8. </template>
  9. <script setup lang="ts">
  10. import { ref } from 'vue';
  11. const show = ref(false);
  12. const toggle = () => {
  13. show.value = !show.value;
  14. };
  15. const beforeEnter = (el) => {
  16. el.style.opacity = 0;
  17. };
  18. const enter = (el, done) => {
  19. el.style.transition = 'opacity 1s';
  20. el.style.opacity = 1;
  21. el.addEventListener('transitionend', done);
  22. };
  23. const afterEnter = (el) => {
  24. el.style.transition = '';
  25. };
  26. const enterCancelled = (el) => {
  27. el.style.opacity = '';
  28. };
  29. const beforeLeave = (el) => {
  30. el.style.opacity = 1;
  31. };
  32. const leave = (el, done) => {
  33. el.style.transition = 'opacity 1s';
  34. el.style.opacity = 0;
  35. el.addEventListener('transitionend', done);
  36. };
  37. const afterLeave = (el) => {
  38. el.style.transition = '';
  39. };
  40. const leaveCancelled = (el) => {
  41. el.style.opacity = '';
  42. };
  43. </script>
  44. <style>
  45. .fade-enter-active,
  46. .fade-leave-active {
  47. transition: opacity 1s;
  48. }
  49. .fade-enter,
  50. .fade-leave-to {
  51. opacity: 0;
  52. }
  53. .box {
  54. width: 200px;
  55. height: 200px;
  56. background-color: red;
  57. }
  58. </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创建动画的示例:

  1. @keyframes fadeIn {
  2. 0% {
  3. opacity: 0;
  4. }
  5. 100% {
  6. opacity: 1;
  7. }
  8. }
  9. .element {
  10. animation: fadeIn 1s;
  11. }

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

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

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

原文链接:https://www.cnblogs.com/yyyyfly1/p/17632760.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号