怎么使用vue实现动画效果

这篇文章主要介绍了怎么使用vue实现动画效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么使用vue实现动画效果文章都会有所收获，下面我们一起来看看吧。

创新互联于2013年开始，是专业互联网技术服务公司，拥有项目成都做网站、网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元通川做网站,已为上家服务,为通川各地企业和个人服务,联系电话:028-86922220

Vue封装的过度与动画

1.作用

在插入，更新，移除DOM元素时,在合适的时候给元素添加样式类名。

2.写法

准备好样式:元素进入的样式

h2 {
  background-color: orange;
}
.hidden-enter-active {
  animation: shanyu 1s;
}
.hidden-leave-active {
  animation: shanyu 1s reverse;
}
@keyframes shanyu {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}

3.样式

需要先有这个animate.css哦

npm i animate.css

1.v-enter:进入的起点

2.v-enter-active:进入过程中

3.v-enter-to:进入的终点

h2 {
  background-color: rgb(139, 37, 255);
}
/* 进入的起点，离开的起点 */
.shanyu-enter,
.shanyu-leave-to {
  transform: translateX(-100%);
}
.shanyu-enter-active,.shanyu-leave-active{
  transition: .5s linear;
}
/* 进入的终点离开的终点 */
.shanyu-enter-to,
.shanyu-leave {
  transform: translateX(0);
}

元素离开的样式:

1.V-leave:离开的起点

2.V-leave-active:离开过程中

3.V-leave-to:离开的终点

4.使用包裹要过度的元素,并配置name属性

    你好啊! 

备注:若有多个元素需要过度，则需要使用: , 且每个元素都要指定key值。

    
      隐藏展示
      隐藏展示
    

关于“怎么使用vue实现动画效果”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么使用vue实现动画效果”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。