Vue实现动画效果

在一个组件的样式中编写一个关键帧

@keyframes guanjianzhen{
   from{
    transform: translateX(-100%);
   }
   to{
    transform: translateX(0px);
   }
}
1
2
3
4
5
6
7
8

设置关键帧的过渡效果

.come{
  animation: guanjianzhen 1s linear;
}

.go{
  animation: guanjianzhen 1s reverse;
}
1
2
3
4
5
6
7

可以通过修改h1标签的类名来实现动画的过渡效果。

    
有动画效果的文字
1

更好的方式是使用transition标签,vue命名来的动画的样式名称不是come，是v-enter-active,离开的样式命名v-leave-active
如果transition标签设置了name，那么来去的动画也都要对应的改变名称，hello-enter-active，当多个内容需要动画的时候就需要命名了，不然会出现冲突。

.hello-enter-active{
  animation: guanjianzhen 0.5s linear;
}

.hello-leave-active{
  animation: guanjianzhen 0.5s  linear reverse;
}
1
2
3
4
5
6
7
8

设置打开网页就自动展现动画

    
      
有动画效果的文字
    
1
2
3

:appear="true"可以直接写成appear.



下面两段代码的功能是等价的。

h1{
  background-color: orange;
  transition: 0.5s linear;
}

/* 进入的起点 */
.bye-enter{
transform: translateX(-100%);
}
/* 进入的终点 */
.bye-enter-to{
transform: translateX(0px);
}
/* 离开的起点 */
.bye-leave{
transform: translateX(0px);
}
/* 离开的终点 */
.bye-leave-to{
transform: translateX(-100%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

h1{
  background-color: orange;
}

/* 进入的起点 离开的终点*/
.bye-enter,.bye-leave-to{
transform: translateX(-100%);
}
.bye-enter-active,.bye-leave-active{
   transition: 0.5s linear;
}
/* 进入的终点 离开的起点*/
.bye-enter-to,.bye-leave{
transform: translateX(0px);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

如果页面中有多个元素需要过渡需要设置transition，这时候可以使用transition-group

       
      
有动画效果的文字1
      
有动画效果的文字2
      
1
2
3
4

Vue封装的过渡与动画的总结

1. 作用：在插入、更新或者移除DOM元素时，在合适的时候给元素添加样式类名。
2. 使用transition包裹要过渡的元素，并配置name属性

 
    
有动画效果的文字

1
2
3

3. 若有多个元素需要过渡，需要使用transition-group，且每个元素都要指定key值

TodoList设置动画效果

通过设置动画效果实现删除慢慢消失，将MyItem整个li都用transition标签包裹设置name=todo,
或者也可以给MyList组件中的MyItem设置transition-group，v-for里面的todos是多个元素

 
   

      
        
        
        {{ todo.title }}
        
      
       删除
      编辑
    
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.todo-enter-active{
  animation: guanjianzhen 0.5s linear;
}

.todo-leave-active{
  animation: guanjianzhen 0.5s  linear reverse;
}
@keyframes guanjianzhen{
   from{
    transform: translateX(-100%);
   }
   to{
    transform: translateX(0px);
   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15