?在我们显示的页面中动画对于我们来说虽然不是必须的,但是必要的一些动画效果能够提高用户的体验,帮助用户更好的理解页面中的功能。所以本文就来给大伙介绍下动画的基础内容。
??我们先来实现一个不带动画效果的显示和隐藏的功能。
案例代码
<!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名称的类名默认前缀是 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文件。
当我们在浏览一个网站的时候,总是发现一些有意思的特效,如鼠标放在文字上会跳动等等。对于CSS动画特效较差的同学和一些后端同学来实现这些功能,可能有些吃力了。
animate.css是一个CSS动画库,他有我们常见的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可以让开发且美观都更快些。
*请认真填写需求信息,我们会在24小时内与您取得联系。