整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

绚丽的效果肯定需要动画的支持,Vue动画入门开篇

绚丽的效果肯定需要动画的支持,Vue动画入门开篇

?在我们显示的页面中动画对于我们来说虽然不是必须的,但是必要的一些动画效果能够提高用户的体验,帮助用户更好的理解页面中的功能。所以本文就来给大伙介绍下动画的基础内容。

Vue 动画

不带动画效果的案例

??我们先来实现一个不带动画效果的显示和隐藏的功能。
案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>

    <div id="app">
        <input type="button" value="开关" @click="flag=!flag">

        <h3 v-if="flag">这是一个h3</h3>
    </div>
    <script>
        var vm=new Vue({
            el: "#app",
            data: {
                flag: false
            },
            methods: {

            }
        })
    </script>
</body>
</html>

效果

在这里插入图片描述

效果虽然实现了,但是效果并不是太好。

过渡类名实现动画

??Vue 在插入、更新或者移除 DOM 时,我们可以在 CSS 过渡和动画中自动应用 class,

在这里插入图片描述

过渡类

说明

v-enter

这是一个时间点,是进入之前,
元素的起始状态,此时还没有开始进入

v-enter-active

入场动画的时间段

v-enter-to

入场结束的时间点

v-leave

离场动画开始的时间点

v-leave-active

离场动画的时间段

v-leave-to

这是一个时间点,是动画离开之后,
离开的终止状态,此时,元素 动画已经结束了

具体使用

1.要使用过渡动画效果的元素 必须被 transition标签包裹

在这里插入图片描述

2.定义对应的样式

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        /**opacity 透明度  transform :https://www.cnblogs.com/xiaomifeng/p/9139632.html**/
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX( 150px )
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 1s ease
        }
    </style>
</head>
<body>

    <div id="app">
        <input type="button" value="开关" @click="flag=!flag">
        <transition>
            <h3 v-if="flag">这是一个h3</h3>
        </transition>
    </div>
    <script>
        var vm=new Vue({
            el: "#app",
            data: {
                flag: false
            },
            methods: {

            }
        })
    </script>
</body>
</html>

效果

在这里插入图片描述

定义transition名称

??对于没有定义的transition名称的类名默认前缀是 v-,但如果我们想要自定义前缀,那么可以给transition设置个那么属性,比如:

在这里插入图片描述

在这里插入图片描述

效果还是一样的。

通过第三方类来实现动画

??通过案例中我们需要自定动画效果,这个会显得有点麻烦,这时我们可以使用别人已经定义的动画效果,比如Animate.css来实现,https://daneden.github.io/animate.css/ 官网效果

在这里插入图片描述

是不是提供的效果蛮多的呀,我们就来看看具体怎么用吧。

  • 引入资源样式

在这里插入图片描述

可以自行在官网下载 在transition中添加对应的样式

在这里插入图片描述

https://github.com/daneden/animate.css 具体的样式类可以在此页面选择

在这里插入图片描述

注意:duration="毫秒值" 来统一设置 入场离场 时候的动画时长

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/animate.css">
</head>
<body>

    <div id="app">
        <input type="button" value="开关" @click="flag=!flag">
        <transition 
            enter-active-class="bounceIn" 
            leave-active-class="bounceOut" 
            :duration="{ enter: 200, leave: 400 }">
            <h3 v-if="flag" class="animated">这是一个H3</h3>
        </transition> 
    </div>
    <script>
        var vm=new Vue({
            el: "#app",
            data: {
                flag: false
            },
            methods: {

            }
        })
    </script>
</body>
</html>

效果

在这里插入图片描述

演示效果不是太理想,工具原因,感兴趣的小伙伴可自行运行哦。

用HTML+CSS+JS网页设计与制作,酷炫动效科技农业网页。

可以用于家乡介绍、科技农业、图片画廊展示等个人网站的设计与制作。农业网站、家乡网站、农产品网站、旅游网站。

网站亮点

1、视觉设计:排版布局极简设计,优质的视觉体验等。

2、动效交互:幻灯效果、入场动画、按钮点击、视差功能、锚点功能、图片画廊功能、英文断行等。

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>


基础知识储备

HTML 定义网页的内容;CSS 规定网页的布局;JavaScript 对网页行为进行编程。

即:HTML——结构;CSS——样式;JS——行为。

1、HTML

HTML 是用来描述网页的一种语言。HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 文档=网页:

HTML 文档描述网页;

HTML 文档包含 HTML 标签和纯文本;

HTML 文档也被称为网页;


Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容。

    <!DOCTYPE html> 声明为 HTML5 文档
    <html> 元素是 HTML 页面的根元素
    <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
    <title> 元素描述了文档的标题
    <body> 元素包含了可见的页面内容
    <h1> 元素定义一个大标题
    <p> 元素定义一个段落

注:在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签。

下面是一个可视化的HTML页面结构:


2、CSS

CSS 指的是层叠样式表* (Cascading Style Sheets)。CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素。CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

CSS 可以通过以下方式添加到HTML中:

(1)内联样式- 在HTML元素中使用"style" 属性;

(2)内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS;

(3)外部引用 - 使用外部 CSS 文件;

注:最好的方式是通过外部引用CSS文件。


3、JavaScript

JavaScript 是 web 开发者必学的三种语言之一。

JavaScript 能够改变 HTML 内容、

JavaScript 能够改变 HTML 属性、

JavaScript 能够改变 HTML 样式 (CSS)、

JavaScript 能够隐藏 HTML 元素、

JavaScript 能够显示 HTML 元素、


......


网站制作

1、HTML 头部元素解读:

(1)<head> 元素是所有头部元素的容器。

(2)<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。

(3)<title> 标题定义文档的标题。

(4)<link> 标签定义文档与外部资源之间的关系。

而这里,我们在HTML文档头部 <head> 区域使用<link> 元素 来通过外部引用CSS文件。

SS动画特效

当我们在浏览一个网站的时候,总是发现一些有意思的特效,如鼠标放在文字上会跳动等等。对于CSS动画特效较差的同学和一些后端同学来实现这些功能,可能有些吃力了。

animate.css

animate.css是一个CSS动画库,他有我们常见的CSS动画。

animate.css使用方法

1.通过npm下载或者到animate.css官网或git上下载animate.css文件

2.将其引入到html页面中

3.为需要执行CSS动画的元素添加class类,其中animated 是必填的。其次到动画名称(选填)

下图是动画名称,动画主要分为几个大类,你可以注意到bonceln类的弹跳进场出场方式很容易记住。

这里填写一张class动画名称表

4.我们还可以添加delay-2s 延迟播放动画,即2秒后执行动画。

5.下面是代码的展示

总结

通过animate.css可以让我们开发页面的速度在动画特效上更加便捷高效了,不在需要自己从网上找案例然后慢慢的进行调试,测试。当然animate.css动画库的动画特效是大众特效,如果你需要设计更好看,效果更美的特效,这你只能自己查询网上资源自己慢慢测试了。使用animate.css可以让开发且美观都更快些。