网站建设资讯

NEWS

网站建设资讯

怎么使用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

怎么使用vue实现动画效果

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


网站栏目:怎么使用vue实现动画效果
本文URL:http://cdweb.net/article/jggosg.html