应届生4天的时间来制作一个简单的HTML按钮和CSS，应该解雇他吗？

简单”的技术人员会自动承担一点HTML和CSS，但由于您是负责招聘和解聘的业务人员，您认为这很简单，但从技术上讲不是这样。

如果按钮做任何事情，我的意思是任何事情，它可能很容易需要4天。如果它必须支持所有传统浏览器，则可能需要4天。

如果存在大量的技术缺陷，他必须“使用代码”或“与框架一起工作”而不是输入原始HTML和原始CSS，那么它很容易需要4天。

这也取决于你如何“数天”。一些管理人员把“周末计数”当作日期，所以如果他们在星期五分配了一些东西，并且周一不是“两天”。其实，最差的人会把它算作“4天”。即使他们在星期五下午谈论了它，并且是星期一早上。

如果是前4天，也许第一天花在会议上，第二天花在表格上，所以实际上是2小时，而不是4天。这很自然，因为对一个商务人士来说，每天都是一天，但是你只是付给他上班时间，所以他不会回家为你做（如果他这样做，很好，你很幸运，或者他喜欢你的东西）。

经过的时间与努力不一样。他可能真的花了2个小时。

那么，为什么开发人员创建垃圾和过度复杂的过度工程的东西，而不是像猴子一样生成HTML和CSS，并且每分钟输入一百个单词？为什么他必须花4天的时间“学习框架”并使用代码库，而不是像1995年一样输入HTML和CSS？那么，因为开发人员编码*低维护*和*低调试*不速度。它是2018年，而不是1995年，取决于什么样的堆栈，它可以轻松地花4天时间来安装所有东西。

只有技术主管有资格评估开发人员的技术能力，而不是业务人员。业务人员能做的最好的是评估他的沟通技巧，然后只与其他非技术人员（他可能是那种向所有人讲技术的人，这也是有用的）。

. 简介

 Vue在插入、更新或者移除DOM时，提供了多种不同方式的应用过渡效果
本质上还是使用css3动画，transition、animation

2. 基本用法

使用transition组件，将需要动画的元素放入组件中
 <transition name="">
 元素
 </transition>

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

注：对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

示例：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			.hello{
				width: 200px;
				height: 200px;
				background: #007AFF;
			}
			.fade-enter-active,.fade-leave-active{
				transition: all 3s ease;
			}
			.fade-enter-active{/*进入后*/
				opacity: 1;
				width: 200px;
				height: 200px;
			}
			.fade-leave-active{
				opacity: 0;/*透明度0，当宽高为20的时候变为0*/
				width: 20px;
				height: 20px;
			}
			/*进入的初始状态，需要放在.fade-enter-active的后面*/
			.fade-enter{
				opacity: 0;
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<button @click="show=!show">显示/隐藏</button>
			<transition name="fade">
				<div class="hello" v-show="show">{{msg}}</div>
			</transition>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			mui.init()
			var vm = new Vue({
				el: "#content",
				data: {
					show: false,
					msg: "hello world!"
				}
			})
		</script>
	</body>
</html>

钩子函数

可以在属性中声明 JavaScript 钩子

<transition
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:after-enter="afterEnter"
 v-on:enter-cancelled="enterCancelled"
 v-on:before-leave="beforeLeave"
 v-on:leave="leave"
 v-on:after-leave="afterLeave"
 v-on:leave-cancelled="leaveCancelled"
>
 <!-- ... -->
</transition>

示例：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			.hello{
				width: 200px;
				height: 200px;
				background: #007AFF;
			}
			.fade-enter-active,.fade-leave-active{
				transition: all 3s ease;
			}
			.fade-enter-active{/*进入后*/
				opacity: 1;
				width: 200px;
				height: 200px;
			}
			.fade-leave-active{
				opacity: 0;/*透明度0，当宽高为20的时候变为0*/
				width: 20px;
				height: 20px;
			}
			/*进入的初始状态，需要放在.fade-enter-active的后面*/
			.fade-enter{
				opacity: 0;
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<button @click="show=!show">显示/隐藏</button>
			<transition name="fade" 
			@before-enter="beforeEnter" 
			@enter="enter" 
			@after-enter="afterEnter" 
			@enter-cancelled="enterCancelled"
			@before-leave="beforeLeave"
			@leave="leave" 
			@after-leave="afterLeave" 
			@leave-cancelled="leaveCancelled">
				<div class="hello" v-show="show">{{msg}}</div>
			</transition>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			mui.init()
			var vm = new Vue({
				el: "#content",
				data: {
					show: false,
					msg: "hello world!"
				},
				methods: {
					beforeEnter: function(el) {
						// alert("动画进入之前");
					},
					enter: function(el) {
						// alert("动画进入时");
					},
					afterEnter: function(el) {
						// alert("动画进入之后");
						el.style.background="red";
					},
					beforeLeave: function(el) {
						// alert("动画即将离开之前");
					},
					leave: function(el) {
						// alert("动画离开时");
					},
					afterLeave: function(el) {
						// alert("动画离开之后");
						el.style.background="blue";
					}
				}
			})
		</script>
	</body>
</html>

3. 结合第三方动画库animate.css一起使用

示例：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/animate.css" rel="stylesheet" />
		<style>
			.hello{
				width: 100px;
				height: 100px;
				background: #4CD964;
			 margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<button @click="show=!show">显示/隐藏</button>
			<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
				<div class="hello" v-show="show">{{msg}}</div>
			</transition>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			mui.init()
			var vm = new Vue({
				el: "#content",
				data: {
					show: false,
					msg: "hello world!"
				}
			})
		</script>
	</body>
</html>

注：使用animate动画库的class时要先加上它的基础class，比如我们要使用从左进入的动画，需这样写：

class="animated bounceInLeft"

4. 多元素动画

<transition-group> 元素作为多个元素/组件的过渡效果。渲染一个真实的 DOM 元素。默认渲染，可以通过 tag 属性配置哪个元素应该被渲染。

注意，每个的子节点必须有独立的 key ，动画才能正常工作

<transition-group> 支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它将会获取应用 CSS 移动类 (通过 name 属性或配置 move-class 属性自动生成)。如果 CSS transform 属性是“可过渡”属性，当应用移动类时，将会使用 FLIP 技术使元素流畅地到达动画终点。

<transition-group tag="ul" name="slide">
 <li v-for="item in items" :key="item.id">
 {{ item.text }}
 </li>
</transition-group>

练习：

i，大家好，我是拾光。

今天给大家带来的内容是蒙板使用以及纯CSS实现照片的过渡效果【淡入淡出】，镂空文字以及翻转文字的制作。

开发中可能会使用到，就算是使用不到，但是小编觉得也挺有趣的东西。

希望大家喜欢、

先给大家上效果图：

1、

2、

3、

4、

下面的代码按照顺序来哦~

HTML：
<body>
<div class="element"></div>
<div class="shadow"></div>
<p>Best wishes to you</p>
<button>按钮</button>
<a href="">按钮</a>
<marquee>这里是跑马灯文字</marquee>
</body>
CSS：
/*小编亲测：以下功能谷歌浏览器全部支持，IE不支持。火狐支持镂空字体*/
/*供大家研究学习，实际开发中用到的不是很多。有需求也可以自己增加，体验一下。*/
/*以后还会继续发布其他功能模块的哦~*/
/*希望大家继续关注*/
*{
font-family: "微软雅黑";
}
/*蒙板*/
.element{
background: url(images/6.jpg) repeat;
width: 400px;
height: 600px;
/*下面的数值自己做测试哦~*/
-webkit-mask: url(images/6.jpg) 0 100px;
}
/*渐变*/
.shadow{
width: 400px;
height: 400px;
background: url(images/12.jpg) no-repeat;
-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
/*镂空字体*/
p{
font-size: 50px;
color: transparent;
-webkit-text-stroke: 1px red;
}
/*反向按钮*/
button{
-webkit-box-reflect: below;
width: 100px;
height: 100px;
background-color: rgba(0,0,0,0.5);
margin-bottom: 100px;
outline: none;
border: none;
}
/*反向按钮*/
a{
width: 100px;
height: 200px;
display: block;
border: 1px #222;
-webkit-box-reflect: right 0;
}
/*跑马灯效果。自己可以去w3c看API，可以自定义多个值，例如速度、方向等*/
/*在此给大家展示的是：当网页进行比例放大时，字体的大小没有变化。大家可以试试哦~*/
marquee{
/*设置网页被放大时，字体不被放大*/
zoom: reset;
}

今天的内容就到这里了哦~

看完了之后觉得是否强大呢，迫不及待的试试了呢？

您还可以阅读以下文章哦~

CSS制作乐视1S手机模型[xiao]示例

JAVA实现带进度条的多文件上传

前端HTML5实现星空碎片炫酷导航

双11到了，赶快体验一下吧~

淘宝Buy＋给你不一样的双11购物体验

前端模块_js仿百度[带方向感知的鼠标滑过图片效果]_02

在线咨询

上一篇：前端干货：利用css3编写一个炫酷的波浪效果loading动画
下一篇：「UI框架」Layui的页面元素之form表单基本介绍

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

应届生4天的时间来制作一个简单的HTML按钮和CSS，应该解雇他吗？

您的项目需求