从头开始复习css之动画

时间  2019-11-07
标签 从头开始 复习 css 动画 栏目 CSS 繁體版
原文   原文链接

说到动画，其实不少人心中都会有一种抵触的情绪 老是认为动画并非项目内须要的。而且动画也不必定是项目内必须的东西，因此不少人并非很在乎这个玩意儿。可是我想说的是：区别一我的的价值并非在完成项目的能力，而是将项目优化的程度。而动画正式如此，他并非你的必须品 可是能让你的能力更上一个台阶。javascript

1、 什么是动画？

说到动画，在不少的眼里 都会认为动画是一个无关紧要的东西。由于在不少程序员的平常开发中，动画基本都是没有被用到的。咱们这里来谈到动画会不会有点多余呢？css

正如我前面说到，动画并非项目中的必需品，但倒是项目的润滑剂。由于它能很大程度上能加强用户的体验。说了这么多，究竟动画是什么呢？html

动画是使元素从一种样式逐渐变化为另外一种样式的效果。而且动画可以改变任意多的样式任意多的次数。前端

怎么理解这句话呢？就直接从动画的属性开始提及吧。vue

2、 谈一谈动画的基础属性

前面一个小节，简单介绍了一下动画到底是什么。这章我就用动画的api来说讲解一下动画的定义。首先来看下面一段代码：java

// css
@keyframes move {
  from {
    top:0px;
  }
  to{
    top: 20px
  }
}
.test {
  width: 10px;
  height: 10px;
  background-color: red;
  animation-name: move;
  animation-duration: 3s;
  position:relative;
}
// html
<div class="test"></div>
复制代码

效果以下： git

效果.gif

从上面的效果图咱们能够发现：本来静止的组件运动了起来。首先咱们来谈一谈其中用到动画的属性值：程序员

  • @keyframes关键帧 关键帧的做用是用来建立动画的。而动画的原理就是将一套css样式逐渐变化成另外一套样式。他能够接收另种类型的参数：from/to和百分数，其语法为：
@keyframes animationname {keyframes-selector {css-styles;}}
复制代码
  • animation-name
  • animation-duration

再一看下面的两个属性：animation-name和animation-duration。其含义分别表明动画的名称和一组动画完成的时间。从这两个命名的规则是否是让咱们想起了以前讲过的过渡呢？github

我想说是的：不只这两个属性的含义和过渡中的两个属性相似，而且还包含过渡中的另外两个属性：ajax

  • animation-timing-function：动画的速度曲线。默认是 "ease"
  • animation-delay:动画执行的延时时间

以上这四个属性的含义和使用的方法和前面一篇文章的过渡用法相似，这里我就很少加赘述了。那么既然这里都说了，动画的效果和过渡差很少 那么咱们为何还要花费心思来创造出动画呢？来仔细看我细细为您讲解出来吧，首先来看下面一段代码：

@keyframes move {
  0% {
    top:0px;
  }
  25%{
    top: 20px
  }
  50% {
    top: 40px
  }
  75% {
    top: 20px
  }
  100% {
    top:0;
  }
}
.test {
  width: 20px;
  height: 20px;
  background-color: red;		
}
.test:hover{
  animation-name: move;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  position:relative;
}
复制代码

效果以下：

效果.gif
从上面的代码咱们就能够发现，动画与过渡的第一个区别：过渡只能表明一个状态到另外一个状态的过程，并不能重复，而动画中增长了 animation-iteration-count是来控制动画执行的次数，该参数可接收的是一个整数，infinite表明无限次。

再来看一段代码：

@keyframes move {
  0%   {background:red; left:0px; top:0px;}
  25%  {background:yellow; left:40px; top:0px;}
  50%  {background:blue; left:40px; top:40px;}
  75%  {background:green; left:0px; top:40px;}
  100% {background:red; left:0px; top:0px;}
}
.test {
  width: 20px;
  height: 20px;
  background-color: red;
			
}
.test:hover {
  animation-name: move;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction:alternate;
  position:relative;
}
复制代码

效果以下：

效果.gif

从上面的效果咱们能够清楚的发现：animation-direction能够用来定义奇数次是否应该轮流反向播放动画。

咱们再来看一个代码：

@keyframes move {
			0%   {left:0px;}
			100%  {left:60px;}
		}
		.runner {
			width: 20px;
			height: 20px;
			animation-name: move;
			animation-iteration-count: 1;
			animation-timing-function: linear;
			position: absolute;
			
		}
		.user1 {
			background: red;
			animation-duration: 1s;
		}
		.user2 {
			background:black;
			animation-duration: 1s;
			animation-fill-mode: forwards;
			top:30px;
		}
		.user3 {
			background:red;
			animation-duration: 1s;
			animation-iteration-count: infinite;
			top:60px;
		}
		.playground {
			position: relative;
			height: 90px;
		}
		.stop {
			animation-play-state:paused;
		}

	<div class="playground">
		<div class=" runner user1"></div>
		<div class=" runner user2"></div>
		<div id=user3 class=" runner user3"></div>
	</div>
	<button id="test_btn" onclick="myBtnClick()">暂停</button>

	<script type="text/javascript">
		function myBtnClick(){
			document.getElementById("user3").classList.add("stop")
		}

	</script>
复制代码

效果以下：

效果.gif

从上面的现象能够发现：animation-fill-mode能够更改动画完成时的位置，而animation-play-state能中止动画，下面咱们来用书面语言描述一下：

  • animation-play-state：表示动画是否正在运行或者是暂停。主要用途用于js中来中止动画，这个用的很少 不知道如何举例
  • animation-fill-mode：表示对象动画时间以外的状态。

这里值得说明的是：animation-fill-mode有四个可选值： 一、 none 不改变默认行为。 二、 forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 三、 backwards 在 animation-delay 所指定的一段时间内，在动画显示以前，应用开始属性值（在第一个关键帧中定义）。 四、 both 向前和向后填充模式都被应用。

3、 怎么来学习动画呢？

前面一节基本都将动画的效果都简单的阐述了一遍，可是对于那种初学者来讲，在学习的时候基本一学就懂，可是应用的时候就不怎么会，难如下手。针对这种问题，做为程序员第件事儿就是应该想到的就是：从模仿中学习。

怎么理解从模仿中学习呢？在刚开始学习某项技术的时候，咱们应该去读一下同类技术比较成熟的写法。从模仿到使用，再进行改装。

在这里，我就给你们介绍一个比较好的库：animate.css。为何介绍这个库呢？由于它里面就涵盖了大多数的动画效果，而且源码也是能够下载的。咱们能够经过使用它的效果来熟悉动画，学习动画等等。

该如何来使用他呢？来看下面一段代码，说一下它的常规使用方法：

// 引入animate.css
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

.test {
  width: 100px;
  height: 100px;
  background: red;
  margin: 100px;
}
.test:hover {
  animation: wobble 1s;
}
	<div class="test" ></div>
复制代码

效果以下：

效果.gif
这里值得注意的两点：

  • animate是前面全部api的总和，咱们能够用简写，具体的api有：
animation: name duration timing-function delay iteration-count direction fill-mode;
复制代码
  • wobble是animate里面写好的动画效果，咱们在使用的时候能够直接进行引入 具体的效果 咱们能够去官网里面查询更多。

我这里呢？就简单的介绍了animate.css中的一个动画效果，具体的还有更多，官网也有效果 有兴趣的能够学习一下。

4、简单的介绍一下vue中如何使用动画

前面谈到了动画的普通用法，那么做为一个vue框架的使用者，就不得不提到动画在vue中的应用了。首先咱们在介绍使用动画的使用以前，咱们首先介绍一个vue中特有的标签transition，该标签能够给

  • 条件渲染 (使用 v-if)
  • 条件展现 (使用 v-show)
  • 动态组件
  • 组件根节点

任意一种状况添加过渡/动画效果。 来看下面一段代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>动画</title>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.9/dist/vue.js"></script>
	<style type="text/css">
		.area{
			width: 100px;
			height: 100px;
		}
		.red {
			background: red;
		}
		.yellow{
			background-color: yellow;
		}
		.fade-enter-active, .fade-leave-active {
			transition: opacity .5s;
		}
		.fade-enter, .fade-leave-to {
			opacity: 0;
		}
	
	</style>
</head>
<body>
	<div id="app" >
		<button @click="isSelect=!isSelect">{{isSelect?'红色':'黄色'}}</button>
		<transition-group name="fade">
			<div class="area red" v-if="isSelect" key="red"></div>
			<div class="area yellow" key="yellow" v-else></div>
		</transition-group>

	</div>

	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				isSelect:false
			},
			methods:{
			}
		})
	</script>


</body>
</html>
复制代码

效果为：

效果.gif
从上面的效果=能够发现，transition能够给包裹的组件增长动画效果，下面就针对上面的效果，咱们介绍一下vue关于动画效果/过渡效果的几个属性。

  • transition/transition-group

transition的含义是：当存在transition 组件内的节点被插入或删除的时候，vue会作以下处理：

  1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，若是是，在恰当的时机添加/删除 CSS 类名。
  2. 若是过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
  3. 若是没有找到 JavaScript 钩子而且也没有检测到 CSS 过渡/动画，DOM 操做 (插入/删除) 在下一帧中当即执行。
  4. transition只能包裹单个组件，transition-group能包裹多个组件。
  • 动画过渡的类名

在过渡动画中，存在下面六个属性值

一、 v-enter：定义进入过渡的开始状态。在元素被插入以前生效，在元素被插入以后的下一帧移除。 二、 v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入以前生效，在过渡/动画完成以后移除。这个类能够被用来定义进入过渡的过程时间，延迟和曲线函数。 三、 v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入以后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成以后移除。 四、 v-leave: 定义离开过渡的开始状态。在离开过渡被触发时马上生效，下一帧被移除。 五、 v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时马上生效，在过渡/动画完成以后移除。这个类能够被用来定义离开过渡的过程时间，延迟和曲线函数。 六、 v-leave-to: 定义离开过渡的结束状态。在离开过渡被触发以后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成以后移除。 这里值得咱们注意的点是，若是在transition中没有设置name的时候，默认是v-开头，若是设置了name 正如前面fade同样，其中的类名就会演变成fade-开头。

前面既然说了这么多vue中使用动画的基础（咱们这里主要是来复习动画的，vue的知识就不过多的来复习了），那么咱们如何在vue去使用animate.css呢？来看下面一段代码：

<div id="app" >
  <button @click="isSelect=!isSelect">点击</button>
  <transition enter-active-class="animated bounceIn"
        leave-active-class="animated rotateOut">
	<div class="area red" v-if="isSelect"></div>
  </transition>

</div>
复制代码

效果以下：

效果.gif
从上面的代码里面咱们能够发现，咱们已经为组件增长上了animate.css的动画效果，这里如何办到的呢？ 首先咱们再来介绍一下vue的自定义类： 一、 enter-class 二、 enter-active-class 三、 enter-to-class 四、 leave-class 五、 leave-active-class 六、 leave-to-class 分别对应前面过渡动画的六个属性值，来自定义咱们想要的效果和动画。这里值得注意的是：咱们在使用animate.css的类名的时候，通常都要前面加上animated类才能生效。

写在最后

动画实际上是很是重要的，他能给用户一种很是温馨的体验，能够很大程度上面增长用户的体验，因此我建议仍是要多在项目中适当的增长动画。另外，我在最后给你们提到了animate.css--一个很优秀的动画库。我提到这个库不是想说 让大家找到了一个比较好偷懒的办法，而是想让你能从使用中淬炼技术，学习他的用法、兼容语法，从而将动画达到融会贯通的地步。

最近一直在从头开始复习前端、Android这两块知识点。忽然感受要复习的点真的有好多，而后本身仍是好菜呀！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程