Vux使用笔记-transition内容切换动画效果

由于公司最近在做的项目，涉及App的开发，正好前段时间有研究过vue 和 react native 正好可以在此派上用场。

整个APP应用 采用 远程的Android WebViwe 内嵌 H5页面 方式进行开发 ，所以 H5页面采用 基于vue 和 ionic 的 vux框架 进行开发 (过程中遇到不少的坑)。

vue 官网 https://vux.li/

1.使用 transition 添加页面切换过渡动画效果

代码如下：

<transition :name="transitionName" mode="out-in">
      <router-view></router-view>
</transition>

其中的效果样式代码如下：

.slide-left-enter,
  .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    transition: all 0.3s;
  }

  .slide-left-leave-active,
  .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100% 0);
    transition: all 0.3s;
  }

js代码如下:

export default{
    data(){
      return {
        transitionName: 'slide-left'
      }
    },
    watch:{
      '$route' (to, from) {
        const toDepth = to.path.split('/').length
        const fromDepth = from.path.split('/').length
        console.log(toDepth)
        console.log(fromDepth)
        this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
      }
    }
  }

其中 watch 是vue提供的一个方法，它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用 $watch();

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>监控数据的变化</title>
    </head>
    <script type="text/javascript" src="js/vue.js" ></script>
    <body>
        <div id="div1">
            <input type="text" v-model="name">
            <h2>{{name}}</h2>
            <hr>
            <input type="text" v-model="age">
            <h2>{{age}}</h2>
            <input type="text" v-model="user.age">
            <h2>{{user.age}}</h2>
        </div>
    </body>
    <script>
        let vm = new Vue({
            el: "#div1",
            data:{
                name:'Tom',
                age:18,
                user:{
                    id:1,
                    age:20
                }
            },
            watch:{
                //方式一:监控vue实例的数据
                age:(newValue,oldValue) => {
                    console.log('name的newValue值为：'+newValue+'，旧值为:'+oldValue);
                },
                user:{
                    handler:(newValue,oldValue) => {
                        console.log('age的newValue值为：'+newValue.age+'，旧值为:'+oldValue.age);
                        //原来的旧值已经看不见了，只能看到新的值
                    },
                    deep: true //深度监视，当对象中的属性发生变化时会被监控
                }
            }
        });
        //方式二：监控vue实例的数据
        vm.$watch('name',function(newValue,oldValue){
                console.log('name的newValue值为：'+newValue+'，旧值为:'+oldValue);
            });
 
    </script>
</html>

用来监控 数据的变化

'$route' (to, from) {
        const toDepth = to.path.split('/').length
        const fromDepth = from.path.split('/').length
        console.log(toDepth)
        console.log(fromDepth)
        this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
      }

用来监控前一个页面的地址长度和当前页面的地址长度从而判断是使用'slide-right'的切换样式还是‘slide-left’的切换样式。

 

posted @ 2018-07-06 20:47  journeyIT  阅读(126)  评论(0)    收藏  举报