vue中transition动画实现淡入淡出

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画</title><style>.hehe-enter,.hehe-leave-to{opacity: 0;}.hehe-enter-to,.hehe-leave{opacity: 1;}.hehe-enter-active,.hehe-leave-active{transition: all 3s;}</style>
</head>
<body>
<div id="demo"><button v-on:click="Show">点击动画</button><transition-group name="hehe"><h1 v-if="show" :key="1">hello</h1><h2 v-if="show" :key="2">hello world!</h2></transition-group>
</div>
<script src="vue.js"></script>
<script>new Vue({el:'#demo',data:{show:true},methods:{Show(){this.show=!this.show;}}});//需要动画元素放在transition标签内部，在样式里添加类名属性//多个元素使用transition-group
</script>
</body>
</html>

结果截图：

vue中transition动画实现淡入淡出相关推荐

浅尝flutter中的动画（淡入淡出）
在移动端开发中,经常会有一些动画交互,比如淡入淡出,效果如图: 因为官方封装好了AnimatedOpacity Widget,开箱即用,所以我们用起来很方便,代码量很少,做少量配置即可,所以,全部代码 ...
vue中transition动画（移动端页面切换左右滑动效果）
例子一:(简单进入和离开动画) demo1 <template><div><button @click="isShow = !isShow">显 ...
vue中过渡动画（类名实现方式）
vue中过渡动画分为两类,一类是进场动画,一类是出场动画要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数类名本质就是动态添加类名实现动画在进入/离开的过渡中,会有 6 个 c ...
使用C++实现多张BMP图片转换为YUV动画----附加淡入淡出转场（逐渐变明变暗），及垂直滑像转场（逐行渐变）
使用C++实现多张BMP图片转换为YUV动画----附加淡入淡出转场(逐渐变明变暗),及垂直滑像转场(逐行渐变) 一.BMP图像简介 1.BMP图像是什么? 2.BMP图像文件结构 1)图象文件头 2 ...
android gone动画_Android动画之淡入淡出
为了更好的说明Android动画的淡入淡出效果,这里以一个场景为例: 界面上有两个View 控件,两个View交替显示,当一个View淡入显示,另一个View淡出不可见. 我们把当前要显示的View叫 ...
Vue实战项目开发--Vue中的动画特效
项目的源代码在GitHub上:点击查看目录 vue中的css动画原理在Vue中使用Animate.css库在Vue中同时使用过渡属性和动画 Vue中的Js动画与Velocity.js的结合 Vu ...
html5游戏开发马赛克对比,HTML5如何在canvas中实现马赛克的淡入淡出效果
HTML5如何在canvas中实现马赛克的淡入淡出效果发布时间:2020-07-10 16:43:07 来源:亿速云阅读:145 作者:Leah 本篇文章给大家分享的是有关HTML5如何在canv ...
Vue动画的淡入淡出效果
今天呢,我们来利用vue动画实现以下淡入淡出效果在vue中,显示隐藏和创建移除,一个元素或者一个组件的时候,可以通过transition实现动画主要通过6个类名来控制进入(显示,创建) v-en ...
html图片自动淡出变化,用CSS3 transition属性实现淡入淡出轮播图
最近想自己写下轮播图,在网上发现一个网友用CSS transition属性实现的轮播,赶脚超简单哦,自己学习了后整理如下.(找不到原网址了-.-...就不贴了...) (如果不了解transition ...
Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...

vue中transition动画实现淡入淡出

vue中transition动画实现淡入淡出相关推荐

最新文章

热门文章