精华内容
下载资源
问答
  • 这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效插件。该页面切换特效...

    这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

    这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效插件。该页面切换特效使用AJAX来动态加载链接内容,在页面加载的时候,使用CSS3来制作非常酷的页面过渡动画效果。插件中使用pushState方法来管理浏览器的浏览历史,需要的朋友可以参考下

    直接为大家介绍制作过程,希望大家可以喜欢。

    HTML结构

    该页面切换特效的HTML结构使用一个元素来作为页面的包裹元素,p.cd-cover-layer用于制作页面切换时的遮罩层,p.cd-loading-bar是进行ajax加载时的loading进度条。

    Page Transition

    CSS样式

    该页面切换特效中使用body::before和body::after伪元素在页面切换过程中创建两个遮罩层来遮住页面内容。它们的定位是固定定位,高度等于50vh,宽度为100%。默认情况下,使用CSS transform属性将它们隐藏起来(translateY(-100%)/translateY(100%))。当用户切换页面的时候,这些元素被移动回视口当中(通过在

    元素上添加.page-is-changing class)。

    下面的图片演示了这个过程:

    ca16af56314ee35809ca74b4d27996ee.gif

    页面切换特效

    body::after, body::before {

    /* these are the 2 half blocks which cover the content once the animation is triggered */

    height: 50vh;

    width: 100%;

    position: fixed;

    left: 0;

    }

    body::before {

    top: 0;

    transform: translateY(-100%);

    }

    body::after {

    bottom: 0;

    transform: translateY(100%);

    }

    body.page-is-changing::after, body.page-is-changing::before {

    transform: translateY(0);

    }

    页面切换时,页面内容的淡入淡出效果是通过改变p.cd-cover-layer的透明度实现的。它覆盖了.cd-main-content元素,并具有相同的背景色,然后在

    被添加.page-is-changing class的时候,将透明度从0修改为1。

    Loading进度条使用.cd-loading-bar::before伪元素来制作。默认它被缩小(scaleX(0))和transform-origin: left center。当页面切换开始时它被使用scaleX(1)放大会原来的尺寸。

    .cd-loading-bar {

    /* this is the loading bar - visible while switching from one page to the following one */

    position: fixed;

    height: 2px;

    width: 90%;

    }

    .cd-loading-bar::before {

    /* this is the progress bar inside the loading bar */

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    transform: scaleX(0);

    transform-origin: left center;

    }

    .page-is-changing .cd-loading-bar::before {

    transform: scaleX(1);

    }

    特效中平滑的过渡效果使用CSS Transitions来实现。每一个动画元素都被添加了不同的transition-delay,以实现不同的元素动画顺序。

    JAVASCRIPT

    该页面切换特效中在链接上使用data-type="page-transition"属性,用于触发页面切换事件。当插件检测到用户点击事件,changePage()方法将被执行。

    $('main').on('click', '[data-type="page-transition"]', function(event){

    event.preventDefault();

    //detect which page has been selected

    var newPage = $(this).attr('href');

    //if the page is not animating - trigger animation

    if( !isAnimating ) changePage(newPage, true);

    });

    这个方法会触发页面切换动画,并通过loadNewContent()方法加载新内容。

    function changePage(url, bool) {

    isAnimating = true;

    // trigger page animation

    $('body').addClass('page-is-changing');

    //...

    loadNewContent(url, bool);

    //...

    }

    当新的内容被加载后,会替代原来元素中的内容。.page-is-changing class被从body中移除,新加载的内容会被添加到window.history中(使用pushState()方法)。

    function loadNewContent(url, bool) {

    var newSectionName = 'cd-'+url.replace('.html', ''),

    section = $('

    section.load(url+' .cd-main-content > *', function(event){

    // load new content and replace content with the new one

    $('main').html(section);

    //...

    $('body').removeClass('page-is-changing');

    //...

    if(url != window.location){

    //add the new page to the window.history

    window.history.pushState({path: url},'',url);

    }

    });

    }

    为了在用户点击浏览器的回退按钮时触发相同的页面切换动画效果,插件中监听popstate事件,并在它触发时执行changePage()函数。

    $(window).on('popstate', function() {

    var newPageArray = location.pathname.split('/'),

    //this is the url of the page to be loaded

    newPage = newPageArray[newPageArray.length - 1];

    if( !isAnimating ) changePage(newPage);

    });

    以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

    相关推荐:

    展开全文
  • 本文实例为大家分享了vue实现滚动鼠标滚轮切换页面的具体代码,供大家参考,具体内容如下新项目产品被甲方的要求逼疯了,大概返稿了100+次吧,最后甲方网上找了个他们认为的比较有科技感的模板,让我们照着写,首页...

    本文实例为大家分享了vue实现滚动鼠标滚轮切换页面的具体代码,供大家参考,具体内容如下

    新项目产品被甲方的要求逼疯了,大概返稿了100+次吧,最后甲方网上找了个他们认为的比较有科技感的模板,让我们照着写,首页就是类似于纵向走马灯,鼠标滚动切换,一次切换一整屏的效果。之前没接触过,写了个简单的demo,仅作为学习笔记。

    其实原理很简单,就是把所有页面放在一个div中,然后滚动的时候改变外层div的top即可。

    因为滚动条监听事件是实时的,所以要加上节流来防止页面切换太快速,我这控制在1.5s才能切换一页。

    其实vue不应该操作dom,应该用数据来渲染虚拟dom,但是有些地方暂时没找到合适的方法,还是用的dom操作。

    export default {

    name: 'Home',

    data(){

    return{

    screenWeight: 0, // 屏幕宽度

    screenHeight: 0, // 屏幕高度

    index: 1, // 用于判断翻页

    curIndex: 1, // 当前页的index

    startTime: 0, // 翻屏起始时间

    endTime: 0, // 上一次翻屏结束时间

    nowTop: 0, // 翻屏后top的位置

    pageNum: 0, // 一共有多少页

    main: Object,

    obj: Object

    }

    },

    mounted(){

    this.screenWeight = document.documentElement.clientWidth;

    this.screenHeight = document.documentElement.clientHeight;

    this.main = document.getElementById("main");

    this.obj = document.getElementsByTagName("div");

    for (let i = 0; i < this.obj.length; i++) {

    if (this.obj[i].className == 'page') {

    this.obj[i].style.height = this.screenHeight + "px";

    }

    }

    this.pageNum = document.querySelectorAll(".page").length;

    // 浏览器兼容

    if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {

    document.addEventListener("DOMMouseScroll", this.scrollFun, false);

    } else if (document.addEventListener) {

    document.addEventListener("mousewheel", this.scrollFun, false);

    } else if (document.attachEvent) {

    document.attachEvent("onmousewheel", this.scrollFun);

    } else {

    document.onmousewheel = this.scrollFun;

    }

    },

    methods:{

    scrollFun(event) {

    this.startTime = new Date().getTime();

    // mousewheel事件中的 “event.wheelDelta” 属性值:返回的如果是正值说明滚轮是向上滚动

    // DOMMouseScroll事件中的 “event.detail” 属性值:返回的如果是负值说明滚轮是向上滚动

    let delta = event.detail || (-event.wheelDelta);

    // 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s,则不执行翻页动作,这样做是为了实现类似节流的效果

    if ((this.startTime - this.endTime) > 1500) {

    if (delta > 0 && parseInt(this.main.offsetTop) >= -(this.screenHeight * (this.pageNum - 2))) {

    // 向下滚动

    this.index++;

    this.toPage(this.index);

    }else if (delta < 0 && parseInt(this.main.offsetTop) < 0) {

    // 向上滚动

    this.index--;

    this.toPage(this.index);

    }

    // 本次翻页结束,记录结束时间,用于下次判断

    this.endTime = new Date().getTime();

    }

    },

    // 翻页

    toPage(index) {

    if (index != this.curIndex) {

    let delta = index - this.curIndex;

    this.nowTop = this.nowTop - delta * this.screenHeight;

    this.curIndex = index;

    }

    }

    }

    }

    html, body {

    height: 100%;

    }

    body, ul, li, a, p, div {

    /*慎删*/

    padding: 0px;

    margin: 0px;

    }

    #wrap {

    overflow: hidden;

    width: 100%;

    }

    #main {

    position: relative;

    transition:top 1.5s;

    }

    .page {

    /*谨删*/

    width: 100%;

    margin: 0;

    }

    #pageUl {

    position: fixed;

    right: 10px;

    bottom: 50%;

    }

    .active{

    color: red;

    }

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • HTML5 tab切换页面功能实现H5 tab切换页面html{margin: 0; padding: 0;}body{margin: 0 auto; padding: 0;max-width: 1000px; background: #f5f6f8;font-size: 14px;}.m-header{position: relative; height: 0.48rem...

    HTML5 tab切换页面功能实现

    H5 tab切换页面

    html{margin: 0; padding: 0;}

    body{margin: 0 auto; padding: 0;max-width: 1000px; background: #f5f6f8;font-size: 14px;}

    .m-header{position: relative; height: 0.48rem;line-height: 0.48rem; font-size:0.16rem;border-bottom:1px solid #EBEBEB; text-align: center;color: #2C2C2C;letter-spacing: 0;background: #fff;}

    .m-return {position: absolute;display: inline-block;top:0.13rem;left: 0.12rem;width: 0.14rem; height: 0.22rem; background-image: url(https://c2.cgyouxi.com/website/mobile/img/arrow-l.png?v=20180122);background-size: 100% 100%;}

    .m-tab{position: relative;padding: 0.40rem 0 0; width: 100%;background: #fff;}

    .m-tab a{position: absolute; display: inline-block;width: 50%; font-size: 0.14rem;color: #2C2C2C;letter-spacing: 0;line-height: 0.38rem;text-align: center;text-decoration: none;}

    .m-tab a:first-child{top: 0;left: 0; }

    .m-tab a.m-coupons{top:0; right:0;}

    .m-tab a.active{border-bottom: 2px solid #FFAC28;}

    .m-pision{height: 1px; background:#EBEBEB;}

    .m-view1{background: #fff;height: 200px;}

    .m-view2{background: #fff;height: 200px;}

    @media screen and (min-width: 360px) {

    html {

    font-size: 100px!important;

    }

    }

    document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.6 + 'px';

    (function (doc, win) {

    var docEl = doc.documentElement;

    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

    var recalc = function () {

    var clientWidth = docEl.clientWidth;

    if (!clientWidth) {

    return;

    }

    docEl.style.fontSize = 100 * (clientWidth / 360) + 'px';

    };

    if (!doc.addEventListener) {

    return;

    }

    win.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener('DOMContentLoaded', recalc, false);

    })(document, window);

    我的活动

    我邀请的好友

    我的赠送券

    1

    2

    $('#m-return').on('click', function() {

    window.history.back()

    });

    var myCoupons = $('#m-my-coupons');

    var myInvite = $('#m-my-invite');

    var view1 = $('#m-view1');

    var view2 = $('#m-view2');

    $('#m-return').on('click', function() {

    window.history.back()

    });

    myInvite.on('click', function() {

    myCoupons.removeClass('active');

    myInvite.addClass('active');

    view2.hide();

    view1.show();

    });

    myCoupons.on('click', function() {

    myInvite.removeClass('active');

    myCoupons.addClass('active');

    view1.hide();

    view2.show();

    });

    16044_0.jpg

    展开全文
  • Vue切换页面时取消定时器

    目录

    一、问题

    二、解决方法

    三、总结


    一、问题

    1.使用了 element-ui的 this.$notify进行消息提示,但提示是全局的,切换页面后依然存在,但我希望切换页面后消失。

    let notify = _this.$notify({
          title: "提示",
          position: 'bottom-right',
          message: "请填写交接单",
          duration: 0,
          onClose: () => {
            _this.handOverFormNotify = null;
          },
          onClick:()=>{
          },
        });

    二、解决方法

    1.想通过监听路由来控制消息 显示和关闭,但是发现使用 $route 无法生效---子组件中监听route不可行

    2.思考后发现,Vue的生命周期函数就是记录组件(页面)的生命周期的

    3.将取消消息通知的代码写在 beforeUnmount 或 unmounted 生命周期函数中就可以了。

      beforeUnmount(对应Vue2中的beforeDestroy)中手动关闭

    beforeUnmount(){
          notify.close();
    }

    三、总结

    1.页面需要在某个阶段做什么事情,直接写在对应的 生命周期函数 里就可以了。当你觉得某个事件处理的时机自己无法确定时,请先考虑生命周期函数。

    2.创建好notify消息提示后,可以通过变量更改对应的属性。

       如上面代码中 可以通过动态  notify.message="hello,please write handoverForm"修改提示的信息。

    /*

    希望对你有帮助!

    如有错误,欢迎指正!

    */

    展开全文
  • 前言:vue-router的切换不同于传统的页面切换。路由之间的切换,其实就是组件之间的切换,不是真正的页面切换。这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页面无法更新...
  • 本篇是 Android 使用ViewPager实现基本的翻页效果 的升级版 添加了底部点点点图片的切换效果 一、首先是布局页面activity_main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android...
  • JS 切换页面添加监听

    2021-04-17 14:33:13
    需求分析: 倒计时时间实时监听 刷新 window.addEventListener('visibilitychange',()=>{ if(!document.hidden){ this.gettenderstatus(); // 获取最新标示位 此处执行调用你想监听实时刷新的方法 ...})
  • 实现layui中每次切换页面时刷新页面(tab页面) 在html中找到tabChange方法,加上下面这部分代码即可实现每次切换tab页面时刷新页面(重新载入) tabChange: function (id) { //切换到指定Tab项 element....
  • Android默认切换页面的特效: 接下来我想修改成左右滑动的特效: 这时候需要用到一个方法: public void overridePendingTransition (int enterAnim, int exitAnim) enterAnim :Activity进入屏幕时的动画 ...
  • data(){ return{ timer:null, } }, methods:{ timerMethods(){ this.timer = setInterval(()=>{.....},200); }, }, destoryed(){ clearInterval(this.timer); },
  • demo: 截图: 结构: 1、swiper-progress.html 2、css文件夹 -swiper.css -swiper.min.css 3、js...适合不会产生滚动条的页面,如果你的页面会有滚动条,请把禁止微信下拉的js去掉,否则滚动条就被卡住不能往下拉了。
  • tab一种有三个,分别对应其A页面、B页面、C页面,A页面中有个计时器,当切换tab到B页面或者C页面,A页面中的计时器必须要清除 解决方法: 在A页面生命周期中的销毁前清除掉计时器 beforeDestroy() { clearInterval...
  • vue怎么实现左右切换页面

    千次阅读 2020-12-29 07:18:52
    最近在学习vue,准备用vue-cli写一个项目练练,仿照到小米手机网站小米手机官方网站地址:https://m.mi.com/我想实现点击下面的导航左右切换页面,判断什么都有了就是过渡效果有点问题下面是我的app.vueimport ...
  • 本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码,供大家参考,具体内容如下 我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动。 代码解说: 首先我在js自定义了navState参数用于...
  • 在Css做好的前提下,开始改动《点击切换页面》 在里有个大个的div用来id绑定Vue 设置一个img 可以用style绑定在data里面做Css 再用v-bind绑定图片 如图: imgSrc作为显示图片 在data里面绑定选中的图片路径 后面四个...
  • 1原理:其实是将百度touch.js引入到项目中 然后有滑动等事件 在事件中调用方法2安装:npm install vue-touch @ next引入man.js(我引入的报错,找不到路径 手动改掉)import VueTouch from 'vue-touch'Vue.use...
  • 直接为大家介绍制作过程,希望大家可以喜欢。HTML结构该页面切换特效的HTML结构使用一个元素来作为页面的...Page TransitionCSS样式该页面切换特效中使用body::before和body::after伪元素在页面切换过程中创建两个遮...
  • 原标题:Axure RP8:如何做出点击按钮切换页面效果?如何利用Axure RP8做出点击按钮切换页面效果?一起来文中看看~ 先来看一下页面的效果图:点击不同的按钮,切换不同的页面。(是web端和手机端都很常见的交互效果) ...
  • uni-app结合uView滑动切换页面

    千次阅读 2021-01-11 14:42:32
    <template> <view> <view class="top u-padding-top-10"> <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#d4a464">...
  • 先看效果图 第一页 第二页 因为这是我测试制作的网页,所以不标准也不规范,我只是把大概流程写一下。 <template> <div>...el-steps :active="active" finish-status="success">...
  • //搜索区域 <a-form layout="horizontal" :form="form"> //页面切换执行清空查询数据from deactivated() { this.form.resetFields(); },
  • template: '' }) 4.router/index.js import Vue from 'vue' import Router from 'vue-router' //主页面 import mainPage from '@/components/views/main/mainPage' Vue.use(Router) export default new Router({ ...
  • router中需要对页面mate设置index,用以判断向左向右滑动 [{ path: '/myPage', name: 'MyPage', component: () => import('@/views/MyPage.vue'), meta: { index: 1 } }, { path: '/mySecondPage', name: '...
  • vue使用transition切换页面过渡动画,并解决切换组件时产生的空白name属性mode属性class属性举例templatestyle name属性 如果使用一个没有名字的 ,则 v- 是这些类名的默认前缀。如果你使用了 ,那么 v-enter 会替换...
  • 【Android开发】TabLayout+fragment+ ViewPager2 实现通过tab切换页面 1.组件以及包名 viewpager2使用的是Androidx下的,tablayout是使用google的,这两个组件在本项目中不需要引入新的依赖。 import androidx....
  • vue+Swiper实现页面滑动切换效果图如下:安装swiper4npm install swiper2.vue中引入首先在main.js文件中引入swiper的css文件。import "swiper/dist/css/swiper.min.css";然后对于swiper组件,在组件中引入,也可以...
  • vue通过路由来回切换两个页面,默认会重新加载当前页面,导致页面不流畅&&加载时间过长等。而是Vue的内置的一个组件,可以在组件切换过程中将状态保留在内存中,防止重复渲染DOM。当使用包裹动态组件时,会...
  • vue项目切换页面beforeDestory不触发解决方法 主要解决销毁当前页面实例时执行操作: 可以使用路由守卫方法: 使用组件内守卫: beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 this.ws....
  • #bottomNavigationFullScreen {position: fixed;bottom: 0;z-index: 9999;height: 60px;width: 100%;-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.117647), 0 1px 4px rgba(0,0,0,.117647);box-shadow: 0 1px 6px rgb...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 535,045
精华内容 214,018
关键字:

切换页面

友情链接: VerticalViewPager.zip