transition

对于条件渲染(v-if)、条件展示(v-show)、动态组件等，如果希望切换时可以有过渡效果们就可以用transition组件。

1
2
3
<transition name="fade">
  <component ref="compIns" :is="curComp.comp" :data="curComp.data" @on-mounted="curComp.onMounted" @on-click="curComp.onClick"></component>
</transition>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//进入时效果
//from表示初始状态 to表示结束状态(一般与组件本身样式相同) active过渡状态
//all 表示对所有属性进行过渡 1s为时间 ease、ease-in等是过渡函数
.fade-enter-from{
  width: 0px;
}
.fade-enter-active{
  transition: all 1s ease-in;
}
.fade-enter-to{
  width: 100%;
}
//离开时效果
.fade-leave-from{
  width: 100%;
}
.fade-leave-active{
  transition: all 1s ease-in;
}
.fade-leave-to{
  width: 0px;
}

可以通过enter-from-class等属性，自定义类名

通过 绑定duration属性，可以设置动画执行时间，单位为ms

1
2
<transition :duration="500"></transition>
<transition :duration="{enter:100, leave:200}"></transition>

animate动画库

https://animate.style/

生命周期

transition有8个生命周期

@before-enter 进入之前
@enter 过渡
@after-enter 进入之后
@enter-cancelled 过渡中断

@before-leave
@leave
@after-leave
@leave-cancelled 仅限v-show

1
2
3
4
5
6
7
8
<transition name="fade"
        @before-enter="enterFrom"
        @enter="enterActive"
        @after-enter="enterTo"
        @enter-cancelled="enterCancel"
      >
    
      </transition>

回调函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const enterFrom = (el:Element) => {
  console.log('进入之前');
}

const enterActive = (el:Element) => {
  console.log('过渡曲线');
}

const enterTo = (el:Element) => {
  console.log('进入之后')
}

const enterCancel = (el:Element) => {
  console.log('过渡被打断')
}

@enter的回调函数可以接受一个done函数作为参数，执行该函数，使生命周期进入@after-enter。可以用来等待一些异步操作。

1
2
3
4
5
6
const enterActive = (el:Element, done:Function) => {
  console.log('过渡曲线');
  setTimeout(() => {
    done()
  },500)
}

gsap

1
npm install gsap -S

https://greensock.com/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import gsap from "gsap";

const enterFrom = (el:Element) => {
  gsap.set(el, {
    width:0
  })
}

const enterActive = (el:Element, done:gsap.Callback) => {
  gsap.to(el, {
    width: 100,
    duration:.5,
    ease:'ease-in',
    onComplete: done
  })
}

const leaveActive = (el:Element, done:gsap.Callback) => {
  gsap.to(el, {
    width: 0,
    duration:.5,
    ease:'ease-in',
    onComplete: done
  })
}

有点复杂，有时间再研究吧

appear

第一次页面加载时进行的动画

1
2
3
4
5
6
7
<transition name="fade"
        appear
        appear-class="from"
        appear-active-class="active"
        appear-to-class="to"
      >
</transition>
1
2
3
4
5
6
7
8
9
.from{
  width: 0;
}
.active{
  transition: all .5s ease-in;
}
.to{
  width: 100%;
}

transition-group

对于列表类的渲染，比如v-for，添加transition效果

1
2
3
4
5
6
7
<transition-group name="fade">
  <div class="content-items" :key="item" v-for="item in list">
    <slot name="content" :item="item"></slot>
    <slot name="trends"></slot>
    <card :content="`我是第${item}个`"></card>
  </div>
</transition-group>

必须绑定key属性，其他基本与transition相同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.fade-enter-from{
  width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.fade-enter-active{
  transition: all 1s ease-in;
}
.fade-enter-to{
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.fade-leave-from{
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.fade-leave-active{
  transition: all 1s ease-in;
}
.fade-leave-to{
  width: 0;
  white-space: nowrap;
  overflow: hidden;
}