Vue-动画效果

这篇具有很好参考价值的文章主要介绍了Vue-动画效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue动画效果

vue中动画效果是很简单的一个东西,vue帮助我们做了一些动画封装,同时也支持自定义动画,过度,第三方库,这些方式都可以实现,我们一一举例说明

注意:下面的相关截图,由于不是gif动图,所以展示的并不全面。

1 编写案例

首先编写基本组件代码,首先是普通组件,写点基本元素和样式

vue 页面动画,Vue,vue.js,javascript,动画

然后是app组件,引入并展示组件

vue 页面动画,Vue,vue.js,javascript,动画

查看基本效果,可以通过点击按钮展示或者隐藏h1元素

vue 页面动画,Vue,vue.js,javascript,动画

但是这种切换,是没有动画效果的,所以我们可以简单写点动画

2 给案例增加动画(自定义编写)

定义动画

接下来给我们的案例新增d点简单的动画效果,这里写两个,from(来),to(去)两个动画,编写动画其实就是定义动画 这里我定义了一个show的动画(动画名称随意,但是用的时候要对得上!)

vue不跟动画名进行对话,而是样式的类名

vue 页面动画,Vue,vue.js,javascript,动画

手动控制动画

上面定义号动画之后,需要去使用,只需要把动画定义成class样式在需要使用的元素上定义即可

首先是使用来的动画

vue 页面动画,Vue,vue.js,javascript,动画

很遗憾这里不是gif动图

vue 页面动画,Vue,vue.js,javascript,动画

然后是去的动画,只需要把class切换即可

vue 页面动画,Vue,vue.js,javascript,动画

很遗憾这里不是gif动图

vue 页面动画,Vue,vue.js,javascript,动画

上面就是自己编写的动画效果了,需要我们手动进行动画控制,vue也对动画进行了封装,下面就感受下vue封装的动画如果使用

Vue控制单个动画(transition)

当然,简单的动画需要自己编写,如果想让vue帮助控制某个元素的动画效果,需要使用transition(过度)标签对元素进行包裹,transition适用于单个元素,如果想要控制多个元素,可以使用transition-goup标签,下面会提到

对应的命名也不能是随便起的,vue是这么定义命名的:

来的时候vue叫做v-enter-active(进入的时候激活)

离开的时候vue叫做v-leave-active(离开的时候激活)

vue 页面动画,Vue,vue.js,javascript,动画

这样点击按钮就会执行不同的动画了

vue 页面动画,Vue,vue.js,javascript,动画

3 transition的name属性命名(精准控制元素)

在vue中,每一个transition(过度)还可以取名,使用name属性定义,可以更加精准的控制某一个元素,被name修饰的过度就不能用v了,而是要用对应的name值,如果不写name,那么就是默认的v

如果找不到对应的name或者指令出错,都不会报错,而是丢失动画

如果没有name属性进行精准控制,那么全部被transition标签包裹的元素都是相同的动画,如果想要多个属性进行的动画不一致,必须用到name进行精准控制,如果只有一个属性需要用到动画,那么大可不使用name

比如下面的例子:

vue 页面动画,Vue,vue.js,javascript,动画

4 初始化动画(appear)

现在的效果是页面加载的时候是没有动画的,需要点击按钮才会呈现对应的动画,那么能不能让页面一加载就能执行动画呢? 当然是可以的!

通过appear(显示)属性即可实现,它有两种写法

写法1 完整写法 :appear=“true” 加上引号表示这个是表达式,如果不加引号会报错!

vue 页面动画,Vue,vue.js,javascript,动画

写法2 简单写法 直接appear

vue 页面动画,Vue,vue.js,javascript,动画

5 过度效果(使用过度实现动画)

上面动画的效果,使用过度也可以实现,但是稍微复杂了一些

vue 页面动画,Vue,vue.js,javascript,动画

6 多个元素过度 (transition-group)

如果有多个元素,需要有多个过度效果,那么该怎么写,这是时候就要用到多个元素过度

比如下图:两个h1标签拥同样的过度效果,应该怎么写呢

vue 页面动画,Vue,vue.js,javascript,动画

如果这样直接写肯定是不行的而且控制台会报错

vue 页面动画,Vue,vue.js,javascript,动画

这时候就需要使用transition-group标签了,它不同于transition,前者可以控制多个元素,后者只能控制一个元素

但是使用的时候不能直接这么写,不然会继续保持

vue 页面动画,Vue,vue.js,javascript,动画

vue 页面动画,Vue,vue.js,javascript,动画

使用transition-group的时候,还需要指定key值

vue 页面动画,Vue,vue.js,javascript,动画

vue 页面动画,Vue,vue.js,javascript,动画

7 集成第三方动画(animate.css)

上面的例子,都是我们自己写的动画效果

在vue中,可以很轻松的集成一些第三方库,这些第三方库给我们提供了现成的动画效果,可以帮我们实现炫酷的效果,我们只需要拿来用即可,这种第三方库很多,接下来我使用的是:animate.css

在npm中有一个叫animate.css,这是一个成型的动画库,开箱即用,只要引入到项目,动画效果就来了

官网地址:https://www.npmjs.com/package/animate.css或者https://animate.style/

中文官网地址:http://www.animate.net.cn/

接下来按照我的顺序,下载并使用animate.css的动画效果

安装animate.css

想要使用animate.css,必须要引入animate.css,打开终端,输入:

npm install animate.css

这个库特别小,分分钟就按照完了

vue 页面动画,Vue,vue.js,javascript,动画

安装成功的话会在项目里面的node_modules里面看到这个包

vue 页面动画,Vue,vue.js,javascript,动画

引入animate.css

安装完之后,必须要引入,不然是使用不了的,由于只是引用样式,所以可以简单写引入,如下:

    // 引入animate.css第三方动画库 由于引入样式,可以简写引入方式
    import 'animate.css'

vue 页面动画,Vue,vue.js,javascript,动画

使用animate.css

安装和引入完整之后,就可以使用animate.css了,animate.css给我们封装了一些类名,我们直接把类名放到name属性上即可

这一步只是代表配置成了这个库,还没有指定使用这个库的哪个动画

name='animate_animated_animate_bounce'

vue 页面动画,Vue,vue.js,javascript,动画

接下来需要用到两个新的配置项

enter-active-class:配置进入动画

leave-active-class:配置离开动画

这两个选项对应的动画,都可以从官网获取,右侧是全局各种各样的动画效果,直接复制到属性即可(鼠标悬浮到文字上即可复制,并且点击文字可以在线查看动画效果,但是我点击确没有效果)

vue 页面动画,Vue,vue.js,javascript,动画

这里我选择了两个我喜欢的动画

通过这短短几行代码即可实现对第三方动画库的使用

vue 页面动画,Vue,vue.js,javascript,动画

但是我的页面缺没有动画效果,我查了下,是因为电脑设置的原因

解决动画无效的问题

找到系统属性,点击高级->设置

vue 页面动画,Vue,vue.js,javascript,动画

选择自定义,勾选电脑中的 “窗口内的动画控件和元素”

vue 页面动画,Vue,vue.js,javascript,动画

这时候再次调试,记得刷新下,可以看到动画效果了

vue 页面动画,Vue,vue.js,javascript,动画

8 vue动画效果总结

  1. 作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。

  2. 写法:

    1. 准备好样式:

      1. 元素进入的样式:

        • v-enter:进入的起点
        • v-enter-active:进入过程中
        • v-enter-to:进入的终点
      2. 元素离开的样式:

        • v-leave:离开的起点
        • v-leave-active:离开过程中
        • v-leave-to:离开的终点
    2. 使用<transition>包裹要过度的元素,并配置name属性:

    3. 你好啊!

    4. 备注:若有多个元素需要过度,则需要使用:<transition-group>,且每个元素都要指定key值。文章来源地址https://www.toymoban.com/news/detail-596092.html

到了这里,关于Vue-动画效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue多种实现动画效果分享【推荐学习】

    平时上网我经常能在app或者网页上看到很多比较酷的动画效果,这些效果还是比较吸引人的。那么我们自己在写项目时,也都希望能在页面做出一些很酷的动画效果,页面看起来也会更具特色。所以我总结了一些在vue的项目开发中,我们能够实现动画效果的方法,希望能够帮

    2024年02月09日
    浏览(38)
  • 前端开发攻略---Vue通过自定义指令实现元素平滑上升的动画效果(可以自定义动画时间、动画效果、动画速度等等)。

    这个指令不是原生自带的,需要手动去书写,但是这辈子只需要编写这一次就好了,后边可以反复利用。 IntersectionObserver 是一个用于监测元素是否进入或离开视口(viewport)的 API。它可以帮助你在页面滚动时或者元素位置改变时进行回调操作,这样你就可以根据元素是否可见

    2024年04月11日
    浏览(49)
  • vue 分页器组件+css动画效果

    全网都找了一遍没有找到符合UI需求的分页动画,于是就主动上手了 需求: 1、分页最多显示9页,总页数最多显示无上限; 2、点击下一页的时候需要有动画效果过度,如果当前页数是当前显示最后的一页,则停了当前显示最后的位置,但是点击下一页的时候需要用户感知 效

    2024年02月09日
    浏览(41)
  • uniapp实现红包动画效果(vue3)

    首先安装CSS动画库animate.css依赖 打开main.ts文件引入 这两张图片放入static文件夹下 用到的图片red1.png 用到的图片red2.png 红包整体主要分三部分 红包头部 中部 底部 使用uni.createAnimation()创建动画实例并进行相关操作具体查看官方文档 除了红包底部 头部和中部需要定位

    2024年02月12日
    浏览(48)
  • Vue 中通用的 css 列表入场动画效果

      css 代码  封装的列表组件,我是直接循环列表组件的,并且加了一个index 属性 直接传递给子组件的第一个 元素上   这样就能实现列表一项接一项进入的效果动画了 

    2024年02月15日
    浏览(38)
  • 011:vue结合css动画animation实现下雪效果

    GIF录屏文件太卡有点卡,实际是很丝滑的 在 src 下新建 components 文件,创建 VabSnow.vue 组件文件 没啥注意的,主要是scss的变量操作及css动画 😎

    2024年01月19日
    浏览(53)
  • vue 监听滚动条 页面滚动动画

    以页面底部的“回到顶部”功能为例,滚动动画的实现思路是,当点击按钮时,获取当前滚动条的位置,调用定时器函数,每个时间间隔对滚动条的位置递减,直至减小到0,清除定时器,即可回到页面顶部。 当滚动条没有离开首页的一个屏幕高度时,“回到顶部”按钮应设

    2024年02月06日
    浏览(41)
  • 【数据结构与算法】Vue3实现选择排序动画效果与原理拆解

    删除有序数组中的重复项 JavaScript实现选择排序 选择排序(Selection Sort)是一种简单的排序算法,其基本思想是从待排序的数据中选择最小(或最大)的元素,然后将其放到已排序的序列的末尾(或开头)。该算法的时间复杂度为O(n^2),其中n是待排序数据的数量,因此在大规

    2024年02月13日
    浏览(36)
  • 前端vue可以左右滚动的切换的tabs tabs选项卡 滑动动画效果 自动宽度

    前端vue可以左右滚动的切换的tabs tabs选项卡 滑动动画效果 自动宽度, 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下:           #### 使用方法 ```使用方法 swiperTabList: [\\\"2023-06-10\\\",\\\"2023-06-11\\\",\\\"2023-06-12\\\",\\\"2023-06-13\\\",\\\"2023-06-14\\\",\\\"2023-06-15\\\"], //导航列表 swiperTabIdx:

    2024年02月08日
    浏览(44)
  • vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果

    一、实现效果 使用echarts实现省市地图绘制,你也可以绘制全国地图。 根据数据在地图显示柱状图,根据经纬度实现定位。 根据数据显示数据,涟漪动态效果。 当然你也可以根据你自己的需求,增删效果哦。 二、实现方法 1、安装echarts插件 2、获取省市json数据 https://datav.

    2024年02月03日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包