页面跳转淡入淡出效果代码

最新推荐文章于 2021-10-25 20:50:27 发布
最新推荐文章于 2021-10-25 20:50:27 发布
阅读量3.1k 收藏 3
点赞数 2
分类专栏： web 文章标签： transition
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hou_yongkui/article/details/6461042
版权

在需要淡入淡出的页面的<head></head>之间加入如下两行代码

<meta HTTP-EQUIV="Page-Enter" CONTENT="revealtrans(duration=6.0, transition=23)">
<meta HTTP-EQUIV="Page-Exit" CONTENT="revealtrans(duration=6.0, transition=23)">

即能实现页面间跳转时淡入淡出效果。

Duration的值为网页动态过渡的时间，单位为秒。
Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。如下表：
0 盒状收缩
1 盒状放射　
2 圆形收缩　
3 圆形放射　
4 由下往上
5 由上往下　
6 从左至右　
7 从右至左　
8 垂直百叶窗　
9 水平百叶窗
10 水平格状百叶窗　
11垂直格状百叶窗　
12 随意溶解　
13从左右两端向中间展开
14 从中间向左右两端展开　
15 从上下两端向中间展开
16 从中间向上下两端展开　
17 从右上角向左下角展开
18 从右下角向左上角展开　
19 从左上角向右下角展开
20 从左下角向右上角展开　
21 水平线状展开
22 垂直线状展开　
23 随机产生一种过渡方式

 

 

 

<meta http-equiv="page-enter" content="blendtrans(duration=1)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=1)"/>

 

lori
关注
专栏目录
vue路由切换之淡入淡出的简单实现
12-30
路由跳转的淡入淡出 在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果，提升我们程序的动效设计 想让路由有过渡动画，需要在标签的...
[CSS JS] 实现图片自动切换以及淡入淡出动画
最新发布
qq_57232613的博客
03-30 710
【代码】[CSS JS] 实现图片自动切换以及淡入淡出动画。
html控制两个页面转换,html页面切换过度效果实现方案_蓝戒的博客
weixin_39573512的博客
05-30 1454
html页面切换过度效果实现方法很简单，但是对于浏览器的设置有需求，经过测试IE浏览器的默认设置没有问题，但是其他浏览器需要进行设置才可以。实现方法就是：利用文本头的 标记实现页面过渡效果，具体说明如下：IE要求:在IE5.5及以上版本的浏览器中.启用网页过渡效果默认情况下都已经启用了，如果需要手动启用则只需在Internet选项中： Advanced(高级) - Browsing(浏览) - ...
html 页面跳转 加载效果,好看的html页面加载源码带跳转
weixin_35895056的博客
06-03 4037
好看的html页面加载源码带跳转残梦教程网网-页面加载中,请稍候...body{background:#555}.loading{-webkit-animation:fadein2s;-moz-animation:fadein2s;-o-animation:fadein2s;animation:fadein2s}@-moz-keyframesfadein{from{...
javascript逐渐变大的跳转窗口
Microsoft.Net，刘少盟
03-07 505
第一页面：   function getwind () {            newwin = window.open('news.aspx', '奇?迹¡ê发¤¡é生¦¨²', 'left=0,top=0,width=500,height=300');                 }   第二页面：                 var id;
用javascript和css实现菜单淡入淡出及滑动效果
m566666的博客
10-25 1794
先写一个HTML文件里面嵌入css代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
WPF页面淡出淡入切换效果
09-04
在Windows Presentation Foundation (WPF) 中，开发人员可以利用丰富的动画功能来实现各种炫酷的用户界面效果，其中就包括页面之间的淡出淡入切换。这种效果能够为应用程序增添流畅和专业的视觉体验，提高用户的交互...
jquery淡出淡入广告图片切换代码
04-08
1. **jQuery淡入淡出效果**：jQuery库提供了`.fadeIn()`和`.fadeOut()`方法，可以实现元素的平滑淡入和淡出效果。在这个广告图片切换代码中，这些方法被用来在图片之间无缝过渡，为用户创造流畅的视觉体验。通过调整...
安卓欢迎页面淡入淡出
04-29
实现这种淡入淡出效果主要涉及到安卓的动画框架，包括属性动画（Property Animation）和视图动画（View Animation）。属性动画系统是Android 3.0（API level 11）及更高版本引入的，它允许对对象的属性进行连续的...
html界面切换动画效果图,HTML5多层页面切换显示过渡动画效果
weixin_33278819的博客
06-09 1273
HTML导入代码模板：Arrow Left Your CS success starts here.Hack Reactor's 12-week immersive coding school is accepting applications for onsite and online courses. Apply now and become a software enginee...
jQuery实现淡入淡出效果
12-15
用fadeIn、fadeOut、fadeToggle来实现淡入淡出。
html页面跳转href过渡效果,页面锚链接平滑动画过渡纯JS插件
weixin_29442503的博客
06-04 1231
smooth-scroll.js是一款轻量级的纯JS页面锚链接平滑过渡插件。通过该锚链接插件，可以在点击页面的锚链接时，以指定的过渡动画平滑滚动页面。安装可以通过npm或bower来安装smooth-scroll.js插件。npm install cferdinandi/smooth-scrollbower install https://github.com/cferdinandi/smooth...
html 网页跳转动画,CSS3+js实现web页面切换动画
weixin_35748508的博客
06-09 4537
首先是效果展示图！ 一共有两个页面~代码方面差别并不是很大。所以我只讲解其中一个页面。上代码。index.html点击切换页面css_index.css*{padding: 0;margin: 0;}#all{position: absolute;left: -100vw;transition:left 1s;-moz-transition:left 1s;/* Firefox 4 */-webk...
html页面自动切换效果,HTML页面跳转效果
weixin_34840783的博客
05-31 1790
HTML页面跳转效果使用格式：在页面中插入duration=时间Transitionv=方式说明：duration为页面切换的时间长度，3.000表示3秒钟，一般可以直接输入3便可；transition为切换效果，从1-23共22种不同的切换效果，其中23为随机效果。效果 　Content 　Transitionv盒状收缩 RevealTrans 0盒状展开　 RevealTrans 1圆形收缩　...
html过渡效果与渐变效果的区别,页面转换（过渡）的渐变效果
weixin_35782943的博客
06-04 350
昨天在上逛着玩时，发现页面渐变的转换效果挺漂亮(什么？你没看到，那你刷新本网页试试，注意：该效果目前只在IE下有效)，不安份的我就打开了安安的Blog的源代码(Oh！原谅我的好奇)，一行行的查找，原本以为这应该是用JS来完成的，结果我经过仔细比照以后，才发现，问题的源头原来是来自最不起眼的Meta标签，有点意思，去网上一查，原来Meta标签不只有标注网页描述，定义网页关健字这样的有利于SEO的功能...
JavaScript之点击打开新网页--渐入HTML8
你的大数据学长
02-14 3971
JavaScript之点击打开新网页--渐入HTML8代码关键代码解释结果展示 代码 非常简单的一个代码，所有代码都可以在我的GitHub中找到，链接在此 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浏览器对象-window&l...
网页淡入淡出效果实践
iteye_130的博客
11-23 294
今天看到有个网站采用了淡入淡出效果，感觉挺酷的，所以就自己也做了一个小DEMO,下面是源代码。 page1.html: [code="html"] 网页淡入淡出效果演示 网页一 跳转到网页二 网页淡入淡出效果演示网页淡入淡出效果演示网页淡入淡出效果演示网页淡入淡出效果演示 网页淡入淡出效果演示网页淡入淡出效果演示网页淡入淡出效...
html中的http-equiv属性应用详解
weixin_33805557的博客
08-07 213
html中的http-equiv属性应用详解 一.简介 http-equiv 属性 -- HTTP协议的响应头报文 此属性出现在meta标签中 此属性用于代替name，HTTP服务器通过此属性收集HTTP协议的响应头报文 此属性的HTTP协议的响应头报文的值应使用content属性描述 http-equiv示例 <meta http-equi...
微信小程序淡入淡出页面切换效果
03-26
微信小程序可以通过动画实现页面切换效果，其中淡入淡出的效果可以通过opacity属性来实现。 首先，在app.wxss中定义以下样式： ``` .fade-enter { opacity: 0; } .fade-enter-active { transition: opacity .5s ease-in-out; opacity: 1; } .fade-leave { opacity: 1; } .fade-leave-active { transition: opacity .5s ease-in-out; opacity: 0; } ``` 其实就是定义了两个类fade-enter和fade-leave，这两个类控制页面的入场和出场动画。fade-enter-active和fade-leave-active控制动画过渡。 然后在页面的wxml中，可以定义一个动画属性，如下所示： ``` <view class="fade-enter" animation="{{animationData}}">欢迎页面</view> ``` 接着，控制小程序页面切换时动画的执行，将如下代码copy到js文件相应的位置 ``` onLoad: function () { // 动画实例 this.animation = wx.createAnimation() }, onShow: function () { // 淡入动画 this.fadeIn() }, fadeOut: function () { // 淡出动画 this.animation.opacity(0).step() this.setData({ animationData: this.animation.export() }) }, fadeIn: function () { // 淡入动画 this.animation.opacity(1).step() this.setData({ animationData: this.animation.export() }) } ``` 其中onLoad函数中初始化动画实例，onShow函数中实现页面切换时的动画，fadeIn函数和fadeOut函数分别实现淡入和淡出动画。 这样，在跳转页面时，只需在跳转函数中调用相应的fadeIn和fadeOut函数即可实现淡入淡出效果。 为了获得更好的效果，此处还可以添加一个小小的优化： ``` onReady: function () { setTimeout(() => { this.fadeOut() }, 2000) } ``` 即在页面是手动切换时立即执行动画，而在小程序初始化导航栏时，延时2秒执行以免页面一开始就看到淡出动画。 以上就是微信小程序淡入淡出页面切换效果的实现方法了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值