vue过渡和动画

最新推荐文章于 2023-07-13 11:26:30 发布

VIP文章老leng不会飞

最新推荐文章于 2023-07-13 11:26:30 发布

阅读量436

点赞数 1

文章标签： vue.js 动画 css

本文链接：https://blog.csdn.net/weixin_57569609/article/details/124674176

版权

从 vue-mouse-parallax 迁移

组件

道具

属性值

1.animate.css动画库

安装和使用

安装

$ npm install animate.css --save

或者使用Yarn安装（这只能与适当的工具（如Webpack，Parcel等）一起使用。如果您没有使用任何工具来打包或捆绑您的代码，则只需使用下面的CDN方法：

$ yarn add animate.css

将其导入到您的文件中：

import 'animate.css';

或者使用 CDN 将其直接添加到您的网页中：

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

基本用法

安装 Animate.css后，将类添加到元素中，以及任何动画名称（不要忘记前缀！animate__animatedanimate__

<span style="background-color:#2d2d2d"><span style="color:#cccccc"><code class="language-html"><span style="color:#e2777a"><span style="color:#e2777a"><span style="color:#cccccc"><</span>h1</span> <span style="color:#e2777a">class</span><span style="color:#7ec699"><span style="color:#cccccc">=</span><span style="color:#cccccc">"</span>animate__animated animate__bounce<span style="color:#cccccc">"</span></span><span style="color:#cccccc">></span></span>An animated element<span style="color:#e2777a"><span style="color:#e2777a"><span style="color:#cccccc"></</span>h1</span><span style="color:#cccccc">></span></span>
</code></span></span>

就是这样！你有一个CSS动画元素。超！

动画可以改善界面的用户体验，但请记住，它们也会妨碍您的用户！请阅读最佳实践和陷阱部分，以最佳方式使您的网络内容栩栩如生。

用@keyframes

即使该库为您提供了一些帮助程序类（如该类）以帮助您快速运行，您也可以直接使用提供的动画。这提供了一种将 Animate.css用于当前项目的灵活方法，而无需重构 HTML 代码。animatedkeyframes

例：

<span style="background-color:#2d2d2d"><span style="color:#cccccc"><code class="language-css"><span style="color:#cc99cd">.my-element</span> <span style="color:#cccccc">{</span>
  <span style="color:#f8c555">display</span><span style="color:#cccccc">:</span> inline-block<span style="color:#cccccc">;</span>
  <span style="color:#f8c555">margin</span><span style="color:#cccccc">:</span> 0 0.5rem<span style="color:#cccccc">;</span>

  <span style="color:#f8c555">animation</span><span style="color:#cccccc">:</span> bounce<span style="color:#cccccc">;</span> <span style="color:#999999">/* referring directly to the animation's @keyframe declaration */</span>
  <span style="color:#f8c555">animation-duration</span><span style="color:#cccccc">:

最低0.47元/天解锁文章

老leng不会飞

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue过渡和动画

目录1.animate.css动画库安装和使用安装基本用法CSS 自定义属性（CSS 变量）延迟等级慢、慢、快、快的类重复上课2.vue-kinesis演示Vue3 - 安装Vue3 - 默认导入Vue2 - 安装Vue2 - 默认导入浏览器用法道具运动容器运动元件kinesis-audio从 vue-mouse-parallax 迁移组件道具属性值1.animate.css动画库安装和.
复制链接

扫一扫