耀极客论坛

 找回密码
 立即注册
查看: 434|回复: 0

vue中transition组件在项目中运用小结

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-7 01:02:30 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了vue中transition组件在项目中运用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  ​vue中的transtion是一个动画过渡封装组件,常见的情景时用transition标签包裹的DOM含有动画效果。transition组件的动画效果过渡设置基于css的transition属性设置。下面给大家介绍下vue中transition组件在项目中运用。
单个弹入弹出运用
  注意:
       
  • name的名字为多少,则下面的样式class开头就要为多少   
  • 通过v-if来配合执行动画效果
  1. ‹template>
  2.   ‹div>
  3.   ‹button v-on:click="show = !show">
  4.     Toggle
  5.   ‹/button>
  6.   ‹transition name="fade">
  7.     ‹p v-if="show">hello‹/p>
  8.   ‹/transition>
  9.   ‹/div>
  10. ‹/template>
  11. ‹script>
  12. export default {
  13.   data () {
  14.     return {
  15.       show: true
  16.     }
  17.   },
  18. }
  19. ‹/script>
  20. ‹style scoped lang="less">
  21. .fade-enter-active,
  22. .fade-leave-active {
  23.   transition: all .5s;
  24. }
  25. .fade-leave-to  {
  26.   opacity: 0;
  27.   transform: translateX(20px);
  28. }
  29. .fade-enter{
  30.   opacity: 0;
  31.   transform: translateX(-20px);
  32. }
  33. ‹/style>
复制代码
内容切换控制效果
  注意 :
       
  • key:可以为任意值,通过key值切换而控制动画切换。 组件可以任意, 不变都行,变不变取决于自己。可以用component标签配合is,或者直接v-if也可以。   
  • 绑定key的那个组件需要设置为绝对定位,否则切换会出现卡顿。 也可以设置mode="out-in"或者mode=“in-out” 一前一后。 看自己个人的需求了
  1. ‹template>
  2.   ‹div>
  3.     ‹transition name="fade">
  4.       ‹button class="position" @click="change" :key="status">
  5.         组件
  6.       ‹/button>
  7.     ‹/transition>
  8.   ‹/div>
  9. ‹/template>
  10. ‹script>
  11. export default {
  12.   data () {
  13.     return {
  14.       status: '1',
  15.     }
  16.   },
  17.   methods: {
  18.     change () {
  19.       if(this.docState === '1'){
  20.         this.docState = '2'
  21.       }else{
  22.         this.docState = '1'
  23.       }
  24.     }
  25.   }
  26. }
  27. ‹/script>
  28. ‹style scoped lang="less">
  29. .fade-enter-active,
  30. .fade-leave-active {
  31.   transition: all .5s;
  32. }
  33. .fade-leave-to  {
  34.   opacity: 0;
  35.   transform: translateX(20px);
  36. }
  37. .fade-enter{
  38.   opacity: 0;
  39.   transform: translateX(-20px);
  40. }
  41. .position{
  42.   position: absolute;
  43. }
  44. ‹/style>
复制代码
配合animate框架使用
  注意
       
  • name的值必须设置为 :custom-classes-transition   
  • enter-active-class, leave-active-class来控制出现和消失的样式
  1. ‹link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="external nofollow"  rel="stylesheet" type="text/css">
  2. ‹div id="example-3">
  3.   ‹button @click="show = !show">
  4.     Toggle render
  5.   ‹/button>
  6.   ‹transition
  7.     name="custom-classes-transition"
  8.     enter-active-class="animated tada"
  9.     leave-active-class="animated bounceOutRight"
  10.   >
  11.     ‹p v-if="show">hello‹/p>
  12.   ‹/transition>
  13. ‹/div>
复制代码
页面第一次加载执行动画
  给transition添加 appear
  到此这篇关于vue中transition组件在项目中运用的文章就介绍到这了,更多相关vue中transition组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 04:14 , Processed in 0.066004 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表