vue 点击按钮 显示隐藏有动画效果

最新推荐文章于 2024-05-31 23:33:55 发布
最新推荐文章于 2024-05-31 23:33:55 发布
阅读量2.4k 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stm870581942/article/details/113773971
版权
在Vue中，虽然CSS hover伪类可以方便地实现鼠标移入移出的动画效果，但针对点击事件的动画则需要借助transition-group标签。通过这个组件，开发者能够为元素的显示和隐藏添加平滑的动画过渡。
摘要由CSDN通过智能技术生成

css有鼠标移入移出（hover）的动画效果很方便给，但没有鼠标点击的动画效果，vue中有一个transition-group标签能够实现这一功能。

//注意需要加上key
<div class="lyric-btn" @click="lyric()">词</div>
<transition-group name="lyric">
  <div class=
最低0.47元/天 解锁文章
whale·fall
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于vuejs的鼠标悬停动物显示和隐藏动画特效
FleshyAPP的博客
05-19 940
基于vuejs的鼠标悬停动物显示和隐藏动画特效 提示：这里用到vue.js知识 提示：此文章仅供参考 文章目录基于vuejs的鼠标悬停动物显示和隐藏动画特效前言一、文章介绍二、使用步骤1.HTML代码演示效果如下：总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、文章介绍 简要教程: 这是一款基于vuejs的鼠标悬停动物显示
vue实现鼠标经过动画
12-30
本文实例为大家分享了vue实现鼠标经过动画的具体代码，供大家参考，具体内容如下 详细代码： <template> <div class=hello> <h1>{{ msg }}</h1> <div class=box> <div class=boxchilde mouseenter=flag mouseleave=flag> <div class=flag?></div> </div> </div> </div> </template> [removed] export default { name
hide show vue 动画_vue实现 toggle显示隐藏效果
weixin_39568653的博客
12-22 397
背景介绍jQuery中有个toggle()方法，可以切换元素的显示状态，在用vue时如果不引入jQuery如何实现这种效果？使用场景常见有三种场景：1.控制页面中一个dom元素2.控制页面中多个dom元素3.控制页面中的dom元素是从服务端返回，且有多个技术分析1.一二场景下实现这种效果可以用v-if指令，通过设置true或false来控制dom的隐藏与显示。如果控制一个dom或多个dom我们可以...
vue3中实现鼠标点击后出现点击特效
最新发布
qq_45820271的博客
05-31 512
通过js对鼠标点击进行监听并创建Div，利用CSS实现效果，最终实现点击特效
vue给显示和隐藏加动画效果
m0_45857808的博客
09-07 875
【代码】vue给显示和隐藏加动画效果。
vue实现动画，点击实现隐藏显示
04-11
vue动画，点击实现显示隐藏。
vue动画之点击按钮往上渐渐显示出来的实例
10-17
本实例中，我们将探讨如何实现一个简单的动画效果，即点击按钮后，一个黑色方块会从底部往上渐渐显示出来。 首先，我们需要在HTML中引入Vue.js库。在这个例子中，我们使用的是Vue 2.4.2的CDN链接。接着，我们定义了...
Vue实现固定定位图标滑动隐藏效果
10-16
3. 通过监听滚动事件，动态调整图标的状态，启动和结束隐藏动画。 4. 使用CSS过渡效果实现平滑的隐藏和显示动画。 5. 允许父组件自定义图标内容和监听点击事件。 这种技术在移动端页面设计中非常实用，可以提高页面...
vue.js 实现点击展开收起动画效果
12-29
最近公司项目加了个页面，其中要求是这样的，点击对应列表，展开和收起，其实就是显示和隐藏内容部分；说来惭愧，我花了半天时间才搞出来（自黑一下~），接下来分享给大家，先上效果图： vue页面： (item,...
vue中实现弹出层动画效果的示例代码
10-14
在Vue.js中，实现弹出层的动画效果可以利用Vue的内置组件`<transition>`，它提供了方便的方式来定义进入和离开的过渡效果。本示例将详细解释如何创建一个从上到下渐显的弹出层动画。 首先，我们需要在模板中使用`...
【前端】侧边栏显示隐藏的实现和动画效果
萌狼蓝天の技术栈
09-17 5016
首先我会放上关键代码，然后在文末放上完整代码。 侧边栏的HTML代码如下，到时候Js将会通过Id控制它。 <div class="box-left-menu" id="left-menu"> <div class="title"> 萌狼工作室 <hr> ...
Vue实现鼠标经过文字显示悬浮框效果的示例代码
10-14
主要介绍了Vue实现鼠标经过文字显示悬浮框效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中显示和隐藏如何做动画_vue实现动画和css3动画属性
weixin_39764379的博客
12-19 872
通过css代码，实现具体的动画效果，本案例实现的是对盒子进行放大的动画。用animation做动画时，把效果给-enter-active -leave-active或name>-enter-to-leave-to都可以四、css3CSS3属性中有关于制作动画的三个属性： Transition(过渡),Transform(转换),Animation(动画)1、transtion:trans...
活用async/await，让Vue变得更好用的装饰器！
前端下午茶
10-28 586
作者：OLong原文：https://segmentfault.com/a/1190000037604556下文三个装饰器，都是利用了async/await把异步变成同步的特性实现的。要...
vue3实现滚动页面显示隐藏
javaltt的博客
09-12 475
1）安装@vueuse/core 包，它封装了常见的一些交互逻辑 npm i @vueuse/core@5.0.3 2）在吸顶导航中使用 setup () { // onMounted(() => { // usewindowScroll() =>干啥了? 1.注册滚动事件 2.提供滚动高度(响应式) const { y } = useWindowScroll() // console.log(x, y) // }) return { y }
实现一个hoverDelay延迟hover
dijiangui5341的博客
08-06 459
实现一个hoverDelay延迟hover author: @TiffanysBear 需求背景 经常在页面开发中，需要使用hover事件来触发相应的网络请求或页面DOM元素显示切换，需要考虑的问题就有了： hover动作非常快，如果一hover就请求，会造成多余请求的浪费，造成后端接口不必要的压力 如何判断这个用户hover是想做一定的操作，而不是鼠标误触 构造这个hover延迟...
全屏隐藏菜单特效
aili1947的博客
10-25 114
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="view...
隐藏动画按钮
cyd3136477605的博客
05-17 123
1.先建html文件 2.隐藏设置按钮 3.last 从所有的img标签中选到的最后一个img，选择第一个图片显示，然后在显示下一个 4.显示设置按钮 5.first 从所有的img标签中选到的第一个img，选择第一个图片显示，然后在显示下一个 6.案例结束 ...
夜间模式、全屏，以及虚拟按键的动态隐藏和显示
Android_Daily的专栏
06-28 5940
昨天晚上闲着无聊随便翻了翻书，看到了几个View.SYSTEM_UI_FLAG的相关介绍，顺手敲了下验证之后决定写下来当做记录。 代码如下： package test.lb.com.myapplication; import android.app.Activity; import android.os.Bundle; import android.view.View; im
vue点击按钮动画弹出弹框
06-01
你可以使用Vue的transition组件来实现点击按钮弹出弹框的动画效果。具体实现步骤如下： 1. 在Vue组件中添加一个按钮，并为其绑定一个点击事件。 2. 在Vue组件中定义一个data属性，用于控制弹框的显示和隐藏状态。 3. 使用Vue的transition组件包裹弹框内容，并设置name属性。 4. 在transition组件中使用v-if指令控制弹框的显示和隐藏。 5. 在transition组件中使用CSS样式定义弹框的进入和离开动画效果。 以下是一个简单的示例代码： ```html <template> <div> <button @click="showModal = true">点击弹出弹框</button> <transition name="modal"> <div class="modal-mask" v-if="showModal"> <div class="modal-wrapper"> <div class="modal-container"> <!-- 弹框内容 --> <h3>这是一个弹框！</h3> <p>点击右上角的X可以关闭弹框。</p> </div> </div> </div> </transition> </div> </template> <script> export default { data() { return { showModal: false } } } </script> <style> .modal-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; } .modal-wrapper { display: inline-block; background-color: #fff; border-radius: 4px; padding: 20px; } .modal-enter-active, .modal-leave-active { transition: opacity 0.3s; } .modal-enter, .modal-leave-to { opacity: 0; } </style> ``` 在上面的示例代码中，当点击按钮时，showModal属性的值会变为true，弹框就会显示出来，同时触发进入动画效果。当点击弹框右上角的X按钮关闭弹框时，showModal属性的值会变为false，弹框就会隐藏起来，同时触发离开动画效果。你可以根据自己的需求修改样式或动画效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值