vue动画点击淡人淡出

最新推荐文章于 2024-07-19 10:30:06 发布

原创最新推荐文章于 2024-07-19 10:30:06 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在Vue中使用`transition`组件和CSS样式实现点击元素后的淡入淡出动画效果。通过设置`name`属性，定义不同状态下的CSS样式，并结合JavaScript逻辑控制动画的触发和关闭，实现了一个简单的淡入淡出提示框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//name样式

.mybox-leave-active,.mybox-enter-active{

transition: all 1s ease;

}

.mybox-leave-active,.mybox-enter{

opacity:0 !important;

}

.mybox-leave,.mybox-enter-active{

opacity: 500;

}

//第一步transition 有个name属性，然后我们设置name 样式在上面

<transition name="mybox">

<div class="popout" v-show="popout"> //这个div是淡然淡出的盒子

账号*****已复制到剪贴板

</div>

</transition>

//第二步进行简单逻辑处理

<script>

export default {

data(){

return{

popout:false //初始化为false

}

},

methods:{

copy(){

this.popout=true; //点击后popout为ture

setTimeout(()=>{ //定时器

this.popout=!this.popout; //对popout进行取反

},2000)

}

}

}

</script>