vue页面切换动画-类似于轮播效果、渲染列表给每一行数据加上显示动画

vue页面切换动画-类似于轮播效果

<transition :name="transitionName">
    <router-view/>
</transition>
注意transition标签里面没有mode='out-in'属性，加上表示一个页面隐藏之后另外一个页面才会显示出来，过度的时候有空白页面存在

watch生命函数里面

watch: {
  $route(to, from) {
    if(to.meta.index < from.meta.index) {
      this.transitionName = 'slide-right';
    }else{
      this.transitionName = 'slide-left';
    }
  }
}

路由表里面存放meta： {index： 1}

css样式表里面

.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-to {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-to {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-enter-active, .slide-right-leave-active, .slide-left-enter-active, .slide-left-leave-active {
    transition: all 500ms;
    position: absolute;
}

渲染列表给每一行数据加上显示动画

实现每一行数据加上动画不需要在css样式表里面加代码了，只需要在transition-group标签加上属性即可
html部分

<ul>
  <transition-group @before-enter="beforeEnter" @enter="enter">
     <li v-for="(item, index) in list" :key="item.id" v-if="show" :data-index="index+1">{{item.name}}---{{index}}---{{item.age}}---{{item.job}}</li>
  </transition-group>
</ul>

before-enter和enter方法以及v-if和:data-index标签属性
data中定义

list: [],
show: false

methods中

beforeEnter(el) {
    // 数据进来的初始样式
    el.style.opacity = 0;
    el.style.transform = 'rotateX(90deg)';
},

enter(el, done) {
    // 每条样式数据间隔 60ms
    let del = el.dataset.index * 60;
    setTimeout(()=>{
        // 数据完全进来之后的样式，实现显示动画
        el.style.transition = "all .3s";
        el.style.opacity = 1;
        el.style.transform = 'rotateX(0deg)';
        done();
    }, del);
}

mounted中模拟axios拿数据

setTimeout(()=>{
   this.list = [
        {id: 1, name: '张三', age: 20, job: '程序员'},
        {id: 2, name: '李四', age: 21, job: '产品'},
        {id: 3, name: '王五', age: 22, job: '测试'},
        {id: 4, name: '赵六', age: 23, job: 'UI'},
        {id: 5, name: '孙琦', age: 24, job: '橙红'},
        {id: 11, name: '张三', age: 20, job: '程序员'},
        {id: 22, name: '李四', age: 21, job: '产品'},
        {id: 33, name: '王五', age: 22, job: '测试'},
        {id: 44, name: '赵六', age: 23, job: 'UI'},
        {id: 55, name: '孙琦', age: 24, job: '橙红'}
        ,
        {id: 12, name: '张三', age: 20, job: '程序员'},
        {id: 23, name: '李四', age: 21, job: '产品'},
        {id: 34, name: '王五', age: 22, job: '测试'},
        {id: 45, name: '赵六', age: 23, job: 'UI'},
        {id: 56, name: '孙琦', age: 24, job: '橙红'},
        {id: 17, name: '张三', age: 20, job: '程序员'},
        {id: 28, name: '李四', age: 21, job: '产品'},
        {id: 39, name: '王五', age: 22, job: '测试'},
        {id: 40, name: '赵六', age: 23, job: 'UI'},
        {id: 561, name: '孙琦', age: 24, job: '橙红'}
    ]

    this.$nextTick(()=>{
        this.show = true;
    })
}, 300)

transition结合animate.css库一起使用
https://animate.style/

1、下载animate.css库

yarn add animate.css

2、引入样式

import "animate.css"

3、结合transition一起使用

<transition leave-active-class="animate__animated animate__bounceInLeft"
            enter-active-class="animate__animated animate__bounceInRight">
	<div></div>
</transition>

更好看的动画可以查看 小满zs
transition
transition-group