element-内置过渡动画-fade 淡入淡出

最新推荐文章于 2024-05-30 13:48:10 发布
最新推荐文章于 2024-05-30 13:48:10 发布
阅读量4.7k 收藏
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xie__jin__cheng/article/details/106891090
版权

1.代码 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style type="text/css">
.transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
</style>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<template>
  <div>
    <el-button @click="show = !show">Click Me</el-button>
    <div style="display: flex; margin-top: 20px; height: 100px;">
      <transition name="el-fade-in-linear">
        <div v-show="show" class="transition-box">.el-fade-in-linear</div>
      </transition>
      <transition name="el-fade-in">
        <div v-show="show" class="transition-box">.el-fade-in</div>
      </transition>
    </div>
  </div>
</template>
</div>
<script>
var Main = {
    data: () => ({
      show: true
    })
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</body>
</html>

2.运行效果

科学的发展-只不过是读大自然写的代码
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用vue+element ui实现el-tabs文字不动 鼠标经过背景淡入淡出的动画效果以及改element ui tabs 修改成hover触发点击
m0_57454052的博客
04-20 2173
el-tabs的结构 <el-tabs ref="navTabs" tab-position="left" style="height: 500px; margin-top: 100px"> <el-tab-pane v-for="item in Solution.productVoList" :key="item.id" :label='item.productName'> <div class="programme__item">
通过element走马灯和transform实现轮播图文字动画
m0_72200584的博客
09-09 934
通过element走马灯和transform实现轮播图文字动画
vue实现轮播图 （淡入淡出效果 无插件）
2301_78767322的博客
08-02 477
使用vue做轮播图，不使用插件，纯原生。
使用element的过渡效果来做动效
最新发布
qq_43235503的博客
05-30 326
使用element的过渡效果来做动效
vue+slot+transition+v-model实现淡入淡出弹窗效果
qq_42750608的博客
06-14 1482
1.首先说一下v-model,印象中只有input标签使用?太天真,它是进行双向数据绑定的,有了它再不用多写代码了. v-model是 :value和@input的语法糖 使用v-model时: <input v-model="sth"/> 等效于 使用:value和@input时: <input :value="sth" @input="sth=$event.t...
elementUI内置过渡动画的使用
tanqin的博客
11-02 4104
elementui 内置过渡动画的使用
Vue内置过渡动画-常用的类名
WYHS_0710的博客
02-27 1412
1.fade 淡入淡出 <transition name="el-fade-in-linear"> <div v-show="show" class="transition-box">.el-fade-in-linear</div> </transition> <transition name="el-fade-in...
element-ui-最新离线文档.zip
11-02
5. **过渡动画**：Element UI 包含多种过渡效果，如淡入淡出（Fade）、滑动（Slide）等，可以应用于对话框（Dialog）、提示（Tooltip）等组件，使用户界面更加平滑。 6. **国际化支持**：Element UI 支持多语言，...
ember-fade-element:Ember附加组件，用于淡入元素内容的更改
05-20
当元素的内容改变时， ember-fade-element引入衰落和其他过渡效果。 安装 ember addon ember-fade-element 用法 {{#fade-element}} ...some content... {{/fade-element}} 要选择默认效果以外的特定效果，请提供...
原生js鼠标滑过文字淡入淡出效果
11-17
在JavaScript（js）中实现鼠标滑过文字的淡入淡出效果是一项常见的动态网页交互功能。这个效果可以增强用户界面的吸引力，使文本更具视觉吸引力。以下是对这一知识点的详细说明： 1. **HTML基础**：首先，我们需要...
jQuery效果滑动卷动和淡入淡出共2页.pdf.zip
10-30
本文将深入探讨jQuery中的两种常见动画效果——滑动卷动（Slide）和淡入淡出（Fade），并结合实际案例进行详细解析。 一、jQuery滑动卷动效果 1. `slideUp()`和`slideDown()` 滑动卷动主要通过`slideUp()`和`...
导航栏淡入淡出
02-12
在网页设计中，导航栏是页面布局的重要组成部分，它提供了用户在网站中浏览不同页面的便捷途径。...通过理解和实践“导航栏淡入淡出”这一效果，不仅可以提升网页的视觉吸引力，还能加深对CSS3动画和交互设计的理解。
vue中element-ui的内置过渡动画
X W F
05-24 2854
vue中element-ui的内置过渡动画element-ui说明淡入淡出动画（fade）缩放（zoom）展开折叠（collapse）按需引入 element-ui说明 Element 内应用在部分组件的过渡动画，你也可以直接使用，其实简单来说就是复制粘贴，具体参考element-ui官网 淡入淡出动画（fade） 提供 el-fade-in-linear 和 el-fade-in 两种效果。 <template> <div> <el-button @clic
Element-UI开发指南--动画和组件基础(二)
go
07-01 1765
文章目录内置过渡动画fade 淡入淡出zoom 缩放collapse 展开折叠组件Layout 布局基础布局分栏间隔混合布局分栏偏移对齐方式响应式布局基于断点的隐藏类Row 属性Col 属性Container 布局容器常见页面布局Container 属性Header属性Aside 属性Footer 属性Color 色彩Typography 字体字号行高Font-familyBorder 边框边框圆角Icon 图标使用方法Button 按钮文字按钮图标按钮按钮组加载中不同尺寸 内置过渡动画 Element 内
vue中嵌套动画的写法
weixin_46400688的博客
06-05 167
通过这个问题更深入的了解了vue的动画原理。
vue element ui 走马灯轮播图（简单几句话实现自动缩放效果）
热门推荐
SLife4599的博客
07-30 1万+
实现效果 element ui 简单实现轮播图 本文，中间叙述的是过程，完整代码在最后面。 最近在写公司官网，用的是element ui 走马灯组件写的轮播图，ui想要自动缩放的效果，如上视频。在这里详细叙述一下我实现的此功能的逻辑吧。 程序员的通病，就是不喜欢麻烦，我更不喜欢麻烦，我个人喜欢大道至简，用最精简的代码完美的实现需求，是我对自己的要求，也是我个人编程的目标。 跟很多人一样，
2021-07-23
qq_35744728的博客
07-23 460
动画 fade淡入淡出提供el-fade-in-linear和el-fade-in两种效果。 zoom 缩放 el-zoom-in-center，el-zoom-in-top和el-zoom-in-bottom collapse 展开折叠 使用el-collapse-transition组件实现折叠展开效果。 Layout 布局 通过基础的 24 分栏，迅速简便地创建布局。 通过 row 和 col 组件，并通过 col 组件的span属性我们就可以自由地组合布局。 ...
Element-UI中内置动效小记
qq_39203889的博客
08-31 2539
1、前言 为了避免页面各种组件进出太直白，我们常常会给组件加上动效。在element中，为我们提供了内置动画效果： <transition name="el-fade-in"> <div v-show="show" class="transition-box">.el-fade-in</div> </transition> 我们只需要控制显隐即可控制显示特效，非常方便。 2、问题 但是，默认动画效果有时候太快或者太慢，不符合我们的预期，如何调整？ 以渐隐
Vue3.0组件—banner轮播图（渐入渐隐效果）
前端菜鸟
09-19 4643
①组件图片切换有三种方式，第一种是图片两边按钮切换，第二种是点击图片下方小横条切换，第三种是自动切换；②子组件props的属性：listBanner（播放的图片源）、interval（图片播放的间隔时间）、 autoSwitc（是否自动播放banner）、 setHeight（banner的高度）；③给切换图片的标签添加ref，改变ref属性中的opacity，切换透明度，达到图片渐隐渐显的效果，再给对应标签样式中添加`transition-duration: 1.5（片透明度切换的时间）
如何实现 element-plus tabs切换动画效果
09-02
### 回答1： 要实现 element-plus tabs 切换动画效果，可以使用 CSS 过渡（transition）属性以及在切换时添加/移除 CSS 类名的方式来实现。具体方法如下： 1. 在选项卡（tab）容器上添加 CSS 类名，比如 "tab-container"。 2. 在选项卡头部（tab header）中的每个选项卡按钮上添加一个自定义属性，比如 "data-tab-index"，值为对应选项卡的索引，以便在后面的代码中使用。 3. 使用 CSS 过渡属性来设置选项卡内容容器（tab content）的动画效果，例如： ```css .tab-content { transition: opacity .3s; } .tab-content-enter-active, .tab-content-leave-active { opacity: 0; } ``` 这里使用 opacity 属性来控制选项卡内容容器的可见性，在过渡时将其从 1 到 0。 4. 在选项卡按钮点击事件的处理函数中，先获取当前选项卡的索引，然后根据索引找到对应的选项卡内容容器，并添加 / 移除 CSS 类名，以实现过渡效果。例如： ```javascript const container = document.querySelector('.tab-container') const tabs = [...container.querySelectorAll('.tab-header button')] const contents = [...container.querySelectorAll('.tab-content')] tabs.forEach((tab, index) => { tab.addEventListener('click', () => { const content = contents[index] if (!tab.classList.contains('active')) { tabs.forEach(tab => tab.classList.remove('active')) tab.classList.add('active') contents.forEach(content => content.classList.remove('active')) content.classList.add('active') } }) }) ``` 这里使用 `classList` 属性来添加 / 移除 CSS 类名，以触发过渡效果。同时需要注意的是，为了在后面的代码中使用，在选项卡容器、选项卡头部和选项卡内容容器中都需要添加相应的 CSS 类名。 ### 回答2： 要实现element-plus tabs切换动画效果，可以遵循以下步骤： 步骤1：在项目中安装element-plus组件库。可以使用npm或yarn命令来安装，具体命令为：npm install element-plus 或 yarn add element-plus。 步骤2：在项目的入口文件中引入element-plus的样式文件。可以在main.js或App.vue文件中添加以下代码引入样式： import 'element-plus/lib/theme-chalk/index.css'; 步骤3：在需要使用tabs组件的页面中引入和使用element-plus的tabs组件。可以在页面的template部分添加以下代码： <template> <el-tabs v-model="activeTab" type="border-card"> <el-tab-pane label="Tab1" name="1"> Content of Tab 1 </el-tab-pane> <el-tab-pane label="Tab2" name="2"> Content of Tab 2 </el-tab-pane> <el-tab-pane label="Tab3" name="3"> Content of Tab 3 </el-tab-pane> </el-tabs> </template> 步骤4：为tabs组件添加切换动画效果。可以使用element-plus提供的transition组件来实现动画效果。在tabs组件外面包裹一个transition组件，并设置相应的属性，如name、enter-active-class等，实现切换时的动画效果。例如： <template> <transition name="fade" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut"> <el-tabs v-model="activeTab" type="border-card"> ... </el-tabs> </transition> </template> 步骤5：在样式文件中为切换动画效果设置相应的CSS样式。可以使用动画库（如animate.css）提供的动画效果，或自定义CSS样式来实现。例如： .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } 这样就可以实现用element-plus的tabs组件切换时的动画效果。根据需要调整步骤4和步骤5中的属性和样式，在页面中实现满足需求的动画效果。 ### 回答3： 要实现 element-plus tabs 切换动画效果，可以按照以下步骤进行： 1. 使用 element-plus 的 Tabs 组件创建页面的 tab 标签。 2. 在 Tabs 组件中，利用事件监听器监控 tab 切换的过程。可以使用 `@tab-click` 事件监听器来实现。 3. 在监听器中，使用 CSS 动画或过渡来实现 tab 切换的动画效果。 4. CSS 动画可以使用 `@keyframes` 来定义动画的关键帧，然后将动画应用到 Tabs 组件上。 5. 过渡效果可以使用 `transition` 属性来实现，在样式改变的时候添加过渡效果。 6. 可以根据需要，设置不同的动画效果，例如淡入淡出、滑动、放大缩小等等。 7. 使用动画效果时要注意性能和流畅度，避免影响页面加载速度和交互体验。 8. 经过以上步骤，即可实现 element-plus tabs 的切换动画效果。 总的来说，实现 element-plus tabs 切换动画效果的关键是将 CSS 动画或过渡应用到 Tabs 组件上，并利用事件监听器来触发动画效果。同时要注意选择适合的动画效果，以增强页面的交互效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值