uni-app/vue 引入 Animate.css (好看且实用的动画库)

代码哈士奇 等级 1323 1 0
标签: httpsddsvuecss

开发一个程序的时候,我们总想着程序能有各种各样的组件效果 比如弹跳的球等等,像ppt动画那样的效果 整合了Animate.css我们程序的逼格会高很多的,相信我~

Animate.css官网 https://animate.style/

这个网站uni-app云开发教程也是整合了Animate.css

引入

执行 npm install animate.css --save

在main.js中 import 'animate.css';

uni-app/vue 引入 Animate.css (好看且实用的动画库)

如何使用

这里我们写了一个简单的测试

<template>
    <view>
        <view class="test">我来了~</view>
    </view>
</template>
<style>
    .test {
        text-align: center;
        font-size: 40px;
        animation: bounce;
        animation-duration: 2s;
        animation-iteration-count: 10;
    }
</style>

效果如下图 是不是动起来了 哈哈哈哈哈哈哈哈哈~~ uni-app/vue 引入 Animate.css (好看且实用的动画库)

制作一个球

uni-app/vue 引入 Animate.css (好看且实用的动画库) 是不很有意思呢 那么他是怎么实现的呢

一个圆形

使用view组件 基础的样式如下 下面的样式让我们得到了一个球

.funs {
        width: 100px;
        height: 100px;
        border-radius: 100px;
        background-color: #ffffff;
        position: fixed;
        text-align: center;
    }

下落

.ball_one {
        animation: bounceInDown;
        /* referring directly to the animation's @keyframe declaration */
        animation-duration: 2s;
        /* don't forget to set a duration! */
    }

原地跳动

.bail_fone {
        animation: bounce;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }

首先,需要下落球,落下后开始跳动 那么我们给球下落时间为2s 两秒后切换球的样式 让其开始跳动 那么怎么实现呢? 猜的没错 是 :class

完整代码

<template>
    <view style="background-color: #000000;width: 100%;height: 100vh;">
        <view class="one funs" :class="{ball_one:!isAni,bail_fone:isAni}"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                isAni: false
            }
        },
        onLoad() {
            setTimeout(() => {
                this.isAni = true;
            }, 2600)
        },
        methods: {

        }
    }
</script>

<style>

    .one {
        bottom: 150px;
        left: 150px;
        background-size: cover;
    }

    .funs {
        width: 100px;
        height: 100px;
        border-radius: 100px;
        background-color: #ffffff;
        position: fixed;
        text-align: center;
    }

    .ball_one {
        animation: bounceInDown;
        /* referring directly to the animation's @keyframe declaration */
        animation-duration: 2s;
        /* don't forget to set a duration! */
    }

    .bail_fone {
        animation: bounce;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
</style>

实现一个组合框拼接

首先这是静态的时候的样子 uni-app/vue 引入 Animate.css (好看且实用的动画库)

这是动态的样子 uni-app/vue 引入 Animate.css (好看且实用的动画库)

第一个字从上面下落

uni-app/vue 引入 Animate.css (好看且实用的动画库)

样式

.test_one {
        animation: backInDown;
        animation-duration: 2s;
    }

第二个字左侧进入

不再展示 直接上代码

.test_two {
        animation: backInLeft;
        animation-duration: 2s;
    }

第三个字右侧进入

代码如下

.test_three {
        animation: backInRight;
        animation-duration: 2s;
    }

第四个字下到上

代码如下

.test_four {
        animation: backInUp;
        animation-duration: 2s;
    }

拓展

我们可以再加一个自我结束 比如 哈喽,小伙伴们大家好,我是代码哈士奇 效果如下 uni-app/vue 引入 Animate.css (好看且实用的动画库)

怎么实现的呢 很简单 如下

.test_list {
        font-size: 30px;
        margin-top: 40px;
        animation: fadeInDown;
        animation-duration: 3s;
    }

整体代码

<template>
    <view style="position: relative;top: 60px;">
        <view class="f_t test_one">我</view>
        <view class="f_t test_two">是</view>
        <view class="f_t test_three">帅</view>
        <view class="f_t test_four">狗</view>
        <view class="f_t test_list">哈喽,小伙伴们大家好,我是代码哈士奇</view>
    </view>
</template>
<style>
    .f_t{
        text-align: center;
        font-size: 40px;
    }
    .test_one {
        animation: backInDown;
        animation-duration: 2s;
    }

    .test_two {
        animation: backInLeft;
        animation-duration: 2s;
    }

    .test_three {
        animation: backInRight;
        animation-duration: 2s;
    }

    .test_four {
        animation: backInUp;
        animation-duration: 2s;
    }

    .test_list {
        font-size: 30px;
        margin-top: 40px;
        animation: fadeInDown;
        animation-duration: 3s;
    }
</style>

总结

是不是很简单 其实关键就是 animation: xxxx; 这里的xxxx呢 其实就是就是红框中的那些 可以自行尝试哦 还可以在大屏中使用哦 uni-app/vue 引入 Animate.css (好看且实用的动画库)

收藏
评论区

相关推荐

【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发
前面文章我们讲过 electron 让可以用 HTML、JS、CSS 开发桌面应用程序。而 electronvue 是一个结合了 electron 与 vue 的套件。这样我们就能方便地使用 vue 快速开发桌面应用。但是,vue 只是在 js 这层面做了大量的便捷的操作。对 UI 并未过多涉及。此时如果您在开发过程中自己实现一套统一主题的 UI 视觉效果
VUE3(七)vue项目抽离.vue文件中的js、css代码
平常再做开发的时候,一般情况下不会将html,js,css代码写到一个文件中。基本上都会写在各自对应的文件中,然后再引入即可。那么在VUE中我们如何抽离vue文件中的js,与css代码呢? 1:抽离javascriptHome.vue<template <div <div :style"{ padding: '24px', back
Vue的学习笔记(上篇)
一、什么是Vue.js?Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 二、什么是vmodel指令?vmode
介绍 | Vue3中文文档
已经了解 Vue 2,只想了解 Vue 3 的新功能可以参阅 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与以及各种 结合使用时
Vue的学习笔记(中篇)
一、什么是Vue.js?Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。上篇文章我们讲述了基础,可以戳这里:。这篇文章我
Vue的学习笔记(下篇)
一、什么是Vue.js?Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。前面几天我们已经分享了和,今天我们一起来看看下篇。 二
uni-app/vue 引入 Animate.css (好看且实用的动画库)
开发一个程序的时候,我们总想着程序能有各种各样的组件效果比如弹跳的球等等,像ppt动画那样的效果整合了Animate.css我们程序的逼格会高很多的,相信我Animate.css官网 这个网站也是整合了Animate.css 引入执行 npm install animate.css save在main.js中import 'animate.css'; 如何使
10分钟阅读一篇关于Vue
![file](https://oscimg.oschina.net/oscnet/up-4f8ccb1755bb73c4ffe6a7ba91253ddc.jpg "file") Vue-cli Vue脚手架的基本用法,vue脚手架用于快速生成vue项目基础架构: 地址: https://cli.vuejs.org/zh/ 使用方式,安装3.x版本
Subime使用笔记(持续跟进)
Subime使用笔记 ---------- ### 常用插件 * Package Control * Emmet * CSS Format * 格式化CSS代码插件 * DocBlockr * 快速添加代码注释插件 * Side Bar * 增强侧边
Vue 3 组件开发:搭建基于SpreadJS的表格编辑系统(环境搭建)
![image.png](https://upload-images.jianshu.io/upload_images/17056223-960fe5cf787f603c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) Vue是一套用于构建用户界面的渐进式框架,与其它大型 JS 框架不同,Vu
Vue 3.0 公开源码后,有人说这也能算 TypeScript ?
点上方蓝字关注公众号「`前端从进阶到入院`」 精选原创好文、进阶交流群助你进入大厂 本文转自公众号「工业聚」 **前言** 在2019年10月5日,尤小右公开了 Vue 3.0 的源代码。 > vue 3.0 源代码仓库 > > https://github.com/vuejs/vue-next 想了解 vue 3.0 源码的同学,可以访
Vue CLI 3搭建vue+vuex 最全分析
一、介绍 ==== Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件: **CLI**:`@vue/cli` 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令) **CLI 服务**:`@vue/cli-service`是一个开发环境依赖。构建于 [we
Vue Hello World
1 Vue介绍 ======= 伟大的项目是从Hello World而来的,Hello World尽管没有什么实际性的作用,但是在于意义重大。(哈哈哈哈) 好了不废话了入正题。 Vue是一套用于构建用户界面的渐进式JS框架,与其他大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合
Vue+Webpack配置css
  使用Vue+Webpack搭建工程时,在webpack.config.js中的module的rules里针对各种文件配置加载工具。在针对css文件配置时遇到一个问题:打包构建时报错——Module build failed: Unknown word。   配置内容如下: {   test: /\.css$/,   use:
vue echarts vue
1、git地址 [https://github.com/ecomfe/vue-echarts](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fecomfe%2Fvue-echarts) 2、使用 (1)安装 npm install vue-echa