jaweii / vueg----page-transition-plugin Goto Github PK

如题，我使用的是vux组件库，很多页面外部嵌套了better-scroll，有没有一个配置是设置【逐隐】的？还是能根本解决闪耀就更好了！

RT

根据文档安装完成，import之后报下面的错

in ./~/vueg/index.js Module parse failed: ...\Assets\node_modules\vueg\index.js Unexpected token (1:0) You may need an appropriate loader to handle this file type. | <<<<<<< Updated upstream | "use strict";var transition={};transition.install=function(t,n){function e(){var t=this.$el.classList;if(t){var n=[];Object.keys(t).forEach(function(e){n.push(t[e])});var e=!1;if(n.map(function(t){"animated"===t&&(e=!0)}),e){var a=document.createElement("div");a.id="vueg-background";var i=m.default;if(i){var o=i.$data.vuegConfig;if(o&&Object.keys(o).forEach(function(t){f[t]=o[t]}),f.disable)return;var r=document.getElementById("vueg-background");r||(i.$el.parentElement.appendChild(a),r=a),r.innerHTML="",r.classList=[],r.appendChild(this.$el)}}}}function a(){return!(!this.vuegConfig||!1!==this.vuegConfig.disable)||(!m||!m.default||m.default._uid===this._uid)}function i(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this;if(a.call(t)&&t&&!1!==l.value&&d){var n=this.$el;if(n&&n.parentElement){r(),Object.keys(s).forEach(function(t){f[t]=s[t]});var e=this.$data.vuegConfig;e&&Object.keys(e).forEach(function(t){f[t]=e[t]}),f.disable&&(u=""),f.shadow&&(n.style.boxShadow="0 3px 10px rgba(0, 0, 0, .156863), 0 3px 10px rgba(0, 0, 0, .227451)"),"first"===u&&(n.style.animationDuration=f.firstEntryDuration+"s",n.classList.add("fadeIn")),u&&(n.style.animationDuration=f.duration+"s"),n.classList.add("animated");var i=["touchPoint"],o=void 0;switch(u){case"forward":o=f.forwardAnim;break;case"back":o=f.backAnim}o&&n.classList.add(o);var c=void 0,m=document.head||document.getElementsByTagName("head")[0],v=void 0;if((c=document.getElementById("vueg-style"))||((c=document.createElement("style")).type="text/css",c.id="vueg-style",m.appendChild(c)),-1!==i.findIndex(function(t){return t===o}))switch(o){case"touchPoint":var p={x:document.documentElement.clientWidth/2,y:document.documentElement.clientHeight/2};v=".touchPoint{\n max-height:"+document.documentElement.clientHeight+"px!important;\n overflow:hidden;\n animation-name:touchPoint;\n position: relative;\n animation-timing-function: linear;\n }\n @keyframes touchPoint {\n from {\n opacity:0.5;\n transform: scale3d(0, 0, 0);\n left:"+(-p.x+h.x)+"px;\n top:"+(-p.y+h.y)+"px;\n }\n to{ \n opacity:1;\n transform: scale3d(1, 1, 1);\n left:0;\n top:0;\n }\n }";var g=document.createTextNode(v);c.appendChild(g)}setTimeout(function(){n.classList.remove(f.forwardAnim),n.classList.remove(f.backAnim),n.style.animationDuration="0s";var t=document.getElementById("vueg-background");t&&(t.innerHTML=""),-1!==i.findIndex(function(t){return t===o})&&(c.innerHTML="")},1e3*f.duration+300),setTimeout(function(){n.classList.remove("fadeIn")},1e3*f.firstEntryDuration)}}}function o(t){"mousedown"===t.type?(h.x=t.pageX,h.y=t.pageY):(h.x=t.touches[0].pageX,h.y=t.touches[0].pageY)}function r(){f={duration:"0.3",firstEntryDisable:!1,firstEntryDuration:".6",forwardAnim:"fadeInRight",backAnim:"fadeInLeft",sameDepthDisable:!1,tabs:[],tabsDisable:!1,disable:!1,shadow:!0}}var s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},d=void 0,c=void 0,u=void 0,l={},f=void 0,m=void 0,h={x:0,y:0};r(),t.directive("transition",{bind:function(t,n,e,a){l=n}}),t.mixin({mounted:i,activated:i,beforeDestroy:e,deactivated:e}),n.beforeEach(function(t,n,e){d=t;var a=t.path.split("/").length,i=n.path.split("/").length;if("/"!==t.path.charAt(t.path.length-1)&&(a+=1),"/"!==n.path.charAt(n.path.length-1)&&(i+=1),u=a>i?"forward":"back",a===i&&(u=c===t.path?"back":"forward",f.sameDepthDisable&&(u=""),c=n.path),t.path===n.path&&t.path===c&&(u="first"),f.firstEntryDisable&&(u=""),n.name&&t.name){var o=f.tabs.findIndex(function(t){return t.name===n.name}),r=f.tabs.findIndex(function(n){return n.name===t.name});f.tabsDisable||-1===o||-1===r?-1!==o&&-1!==r&&(u=""):(r>o&&(u="forward"),r<o&&(u="back"),r===o&&(u=""))}var s=t.matched[0];m=s&&s.instances?s.instances:null,e()}),document.addEventListener("mousedown",o),document.addEventListener("touchstart",o)},module.exports=transition; | ======= @ ./src/main.js 19:0-24 @ multi ./build/dev-client ./src/main.js

This dependency was not found:

• vueg/css/transition-min.css in ./src/router.js

To install it, you can run: npm install --save vueg/css/transition-min.css

手机端页面。页面切换的时候会两个页面重叠到一起，这个怎么解决

RT，由于不是使用的 vue-router 的 transition，clone 了 dom 作为背景，这样不能保持原来的滚动位置，会出现 out 的页面会滚动到最上面（其实不是同一个 dom），在 iOS 下有比较明显的闪烁。
PS: 初步判断是这个原因，但是只出现在返回时的动画...

const options = {
duration: '0.2', //转场动画时长，默认为0.3，单位秒
firstEntryDisable: true, //值为true时禁用首次进入应用时的渐现动画，默认为false
firstEntryDuration: '.3', //首次进入应用时的渐现动画时长，默认为.6
forwardAnim: 'touchPoint', //前进动画，默认为fadeInRight
backAnim: 'touchPoint', //后退动画，默认为fedeInLeft
sameDepthDisable: false, //url深度相同时禁用动画，默认为false
tabs: [], //默认为[]，'name'对应路由的name,以实现类似app中点击tab页面水平转场效果，如tabs[1]到tabs[0]，会使用backAnim动画，tabs[1]到tabs[2]，会使用forwardAnim动画
tabsDisable: false, //值为true时，tabs间的转场没有动画，默认为false
shadow: false, //值为false，转场时没有阴影的层次效果
disable: false, //禁用转场动画，默认为false，嵌套路由默认为true
};

Vue.use(vueg, router, options);
我这样配置的，这个效果不起作用，请大神指点

之后，确定设定其组件为height:100vh，路由变换时，会出现上一级界面内容延迟1S 后才会消失，无论是前进 还是后退 都有这个问题出现，能请您帮助一下吗

1. IOS下DEMO页面，当跳转页面后，使用IOS自带的右滑返回，动画会重复执行，效果感人

2.页面A的高度超过一屏，在页面A先滑动到底部，然后跳转页面B；然后点击返回，切换效果空白闪烁很严重

ps:第一个问题我之前的想法是监听首饰，当右滑一定距离时，给全局一个状态标志；然后用户的右滑动作触发了系统的返回，在路由里检测到了这个状态标志，就不触发载入动画

如题，是否能解决呢？
export default new Router({ mode: 'history', routes: [ { path: '/', name: 'Home', component: Home, meta: { title: '首页' } }, { path: '/Phone', component: EmptyTmpl, children: [ { path: 'Public', component: EmptyTmpl,

每个EmptyTmpl模板中有一个router-view。

如题，请问能解决吗？

低版本提示const 不支持

页面切换的时候会残留上一页的元素，过了一秒后才消失，有没有类似mode="out-in"之类的设置
vue-router里面有mode="out-in"的设置，可以设置当旧的页面完全消失了，新的页面才进入
https://cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E6%A8%A1%E5%BC%8F
请问大神，这插件有没有这样的功能

本来应该自己实验一下的，不过还是提issues了，见谅！

计划今晚会去试，试完也会反馈！

主要一个问题是，在命名视图中，路由是改变的，但是视图并不是全部改变的。
这里是vue-router的官方例子命名视图
那么不变的部分会有动画吗？

期望的是，变化的才有动画。
谢谢！

例子中，中间一部分 “bar” 这个router-view没有变化，而是同级的router-view变化了，此时这个“bar”是如何展示的？

对了，这个主要是为webapp设计的，那么在pc端呢？效果怎么样！（我今晚回去试！）

vue.esm.js?77a2:434[Vue warn]: Error in beforeDestroy hook: "TypeError: Cannot read property 'classList' of undefined"

(found in )warn @ vue.esm.js?77a2:434handleError @ vue.esm.js?77a2:519callHook @ vue.esm.js?77a2:2558Vue.$destroy @ vue.esm.js?77a2:2353(anonymous function) @ vuex.esm.js?f024:462(anonymous function) @ vue.esm.js?77a2:655nextTickHandler @ vue.esm.js?77a2:602
vue.esm.js?77a2:523TypeError: Cannot read property 'classList' of undefined(…)handleError @ vue.esm.js?77a2:523callHook @ vue.esm.js?77a2:2558Vue.$destroy @ vue.esm.js?77a2:2353(anonymous function) @ vuex.esm.js?f024:462(anonymous function) @ vue.esm.js?77a2:655nextTickHandler @ vue.esm.js?77a2:602

假设路由 /acc/detail/:id

从： /acc/detail/1 到 /acc/detail/2，然后返回。

      //深度相同
      if (toDepth === fromDepth) {
        if (lastPath === to.path && toDepth < fromDepth) {

这里判断 lastPath === to.path 是 true
而 toDepth == fromDepth 不是 小于。
这个问题是否可以修复？

路由结构是这样：
const router = [{
path: '/',
component: App,
children: [{
path: '/',
redirect: '/login' //默认路由，直接重定向到地址 /login
},
{
path: '/login',
component: Login
},
{
path: '/home',
component: Home
},
{
path: '/register', //注册
component: Register
}]
}]

跳转就是this.$router.push('XXXX')

如题，在ios上的网页，手势右侧滑动可以返回上一页， demo中提供的过渡，在上一页面已经滑到右边的情况下，过渡还是会播放一次。 有办法解决这个问题吗？

npm ERR! unpack Could not read data for [email protected]

使用keep-alive组件缓存后，页面动画进出的顺序乱了，怎么解决呢

调用 $router.go(-1) 后没有动画效果

测试发现在IOS8.X 不兼容，可能造成整个项目崩掉打不开的情况

inserted的时候我看了下 那个配置的assign是不是写反了，
造成的效果是：当我更新配置后不生效，会把我传递的参数重置成之前的（引用类型的原因），我看了下源码，
第110行这样写是可以的，把拷贝的顺序替换

instanceConfig = Object.assign(lastInstanceConfig ,value || {})

大佬还维护的话，可以帮忙看下。万分感谢

怎么解决

on version 1.3.4 all works fine
but after updating to 1.4.0+ animations was gone

can you show simple example how to work with new version?

使用该转场组建后原本页面里的querySelector全失效了，怎么办呢
F12里也取不到任何元素，都是null

Uncaught TypeError: Cannot read property 'querySelector' of null

默认配置
const options={
duration: '0.3', //转场动画时长，默认为0.3，单位秒
forwardAnim: 'fadeInRight', //前进动画，默认为fadeInRight
backAnim: 'fadeInRight' //后退动画，默认为fedeInLeft
}

我就按照demo写的，报了这个错误 Error in beforeDestroy hook: "TypeError: Cannot set property classList of # which has only a getter"

准确的是两个错误：
TypeError: Cannot set property classList of # which has only a getter(…)

emmm,不是很懂

初始化会提示 Failed to resolve directive: transition 然后就不会了，功能正常

https://github.com/jaweii/vueg/blob/029f63565f272786a1b541438cc3709900d1015a/css/transition.css#L11-L26

弱弱地问下，上面这几行代码有什么作用？

我在开发中发现，上面这几行css会导致无限滚动列表中的ul/a/button元素出现渲染延迟的情况，在安卓手机上尤其明显

我引入了vueg后 我的菜单el-menu点击收缩后出现异常，而且处于当机状态，再点就点不了。

用了这个之后，单个页面高度超出一屏之后就没办法滑动了

如题用iOS8的手机访问你的demo没有效果

转场的时候宽度有200vw，造成横向滚动条

1、ios8里的safari无转场动画
2、会导致其它元素的点击事件延迟

很多页面都是使用的keeplive，然后点击返回，back(-1)，页面进来了，但是dom都没渲染，整个页面成空白的状态。

我觉得一个好的插件应该有一个漂亮的Demo 😂

页面使用了定位布局，使用该插件后定位出现乱位

Hello, and thank you for a nice lib, Is there any chance for English docs any time soon?

Thank you

你好，并且感谢你提供一个很好的解释，任何时候英文文档都有机会吗？

谢谢

进入新页面时，新页面滚动条会保留上一个页面的进度而不是在页面顶部