應(yīng)屆生4天的時間來制作一個簡單的HTML按鈕和CSS，應(yīng)該解雇他嗎？

簡單”的技術(shù)人員會自動承擔(dān)一點HTML和CSS，但由于您是負(fù)責(zé)招聘和解聘的業(yè)務(wù)人員，您認(rèn)為這很簡單，但從技術(shù)上講不是這樣。

如果按鈕做任何事情，我的意思是任何事情，它可能很容易需要4天。如果它必須支持所有傳統(tǒng)瀏覽器，則可能需要4天。

如果存在大量的技術(shù)缺陷，他必須“使用代碼”或“與框架一起工作”而不是輸入原始HTML和原始CSS，那么它很容易需要4天。

這也取決于你如何“數(shù)天”。一些管理人員把“周末計數(shù)”當(dāng)作日期，所以如果他們在星期五分配了一些東西，并且周一不是“兩天”。其實，最差的人會把它算作“4天”。即使他們在星期五下午談?wù)摿怂⑶沂切瞧谝辉缟稀?/p>

如果是前4天，也許第一天花在會議上，第二天花在表格上，所以實際上是2小時，而不是4天。這很自然，因為對一個商務(wù)人士來說，每天都是一天，但是你只是付給他上班時間，所以他不會回家為你做（如果他這樣做，很好，你很幸運，或者他喜歡你的東西）。

經(jīng)過的時間與努力不一樣。他可能真的花了2個小時。

那么，為什么開發(fā)人員創(chuàng)建垃圾和過度復(fù)雜的過度工程的東西，而不是像猴子一樣生成HTML和CSS，并且每分鐘輸入一百個單詞？為什么他必須花4天的時間“學(xué)習(xí)框架”并使用代碼庫，而不是像1995年一樣輸入HTML和CSS？那么，因為開發(fā)人員編碼*低維護*和*低調(diào)試*不速度。它是2018年，而不是1995年，取決于什么樣的堆棧，它可以輕松地花4天時間來安裝所有東西。

只有技術(shù)主管有資格評估開發(fā)人員的技術(shù)能力，而不是業(yè)務(wù)人員。業(yè)務(wù)人員能做的最好的是評估他的溝通技巧，然后只與其他非技術(shù)人員（他可能是那種向所有人講技術(shù)的人，這也是有用的）。

. 簡介

 Vue在插入、更新或者移除DOM時，提供了多種不同方式的應(yīng)用過渡效果
本質(zhì)上還是使用css3動畫，transition、animation

2. 基本用法

使用transition組件，將需要動畫的元素放入組件中
 <transition name="">
 元素
 </transition>

過渡的類名

在進入/離開的過渡中，會有 6 個 class 切換。

v-enter：定義進入過渡的開始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除。
v-enter-active：定義進入過渡生效時的狀態(tài)。在整個進入過渡的階段中應(yīng)用，在元素被插入之前生效，在過渡/動畫完成之后移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數(shù)。
v-enter-to: 2.1.8版及以上定義進入過渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之后移除。
v-leave: 定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時立刻生效，下一幀被移除。
v-leave-active：定義離開過渡生效時的狀態(tài)。在整個離開過渡的階段中應(yīng)用，在離開過渡被觸發(fā)時立刻生效，在過渡/動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數(shù)。
v-leave-to: 2.1.8版及以上定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)之后下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之后移除。

注：對于這些在過渡中切換的類名來說，如果你使用一個沒有名字的 <transition>，則 v- 是這些類名的默認(rèn)前綴。如果你使用了 <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，當(dāng)寬高為20的時候變?yōu)?*/
				width: 20px;
				height: 20px;
			}
			/*進入的初始狀態(tài)，需要放在.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>

鉤子函數(shù)

可以在屬性中聲明 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，當(dāng)寬高為20的時候變?yōu)?*/
				width: 20px;
				height: 20px;
			}
			/*進入的初始狀態(tài)，需要放在.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. 結(jié)合第三方動畫庫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時要先加上它的基礎(chǔ)class，比如我們要使用從左進入的動畫，需這樣寫：

class="animated bounceInLeft"

4. 多元素動畫

<transition-group> 元素作為多個元素/組件的過渡效果。渲染一個真實的 DOM 元素。默認(rèn)渲染，可以通過 tag 屬性配置哪個元素應(yīng)該被渲染。

注意，每個的子節(jié)點必須有獨立的 key ，動畫才能正常工作

<transition-group> 支持通過 CSS transform 過渡移動。當(dāng)一個子節(jié)點被更新，從屏幕上的位置發(fā)生變化，它將會獲取應(yīng)用 CSS 移動類 (通過 name 屬性或配置 move-class 屬性自動生成)。如果 CSS transform 屬性是“可過渡”屬性，當(dāng)應(yīng)用移動類時，將會使用 FLIP 技術(shù) 使元素流暢地到達(dá)動畫終點。

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

練習(xí)：

i，大家好，我是拾光。

今天給大家?guī)淼膬?nèi)容是蒙板使用以及純CSS實現(xiàn)照片的過渡效果【淡入淡出】，鏤空文字以及翻轉(zhuǎn)文字的制作。

開發(fā)中可能會使用到，就算是使用不到，但是小編覺得也挺有趣的東西。

希望大家喜歡、

先給大家上效果圖：

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不支持。火狐支持鏤空字體*/
/*供大家研究學(xué)習(xí)，實際開發(fā)中用到的不是很多。有需求也可以自己增加，體驗一下。*/
/*以后還會繼續(xù)發(fā)布其他功能模塊的哦~*/
/*希望大家繼續(xù)關(guān)注*/
*{
font-family: "微軟雅黑";
}
/*蒙板*/
.element{
background: url(images/6.jpg) repeat;
width: 400px;
height: 600px;
/*下面的數(shù)值自己做測試哦~*/
-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，可以自定義多個值，例如速度、方向等*/
/*在此給大家展示的是：當(dāng)網(wǎng)頁進行比例放大時，字體的大小沒有變化。大家可以試試哦~*/
marquee{
/*設(shè)置網(wǎng)頁被放大時，字體不被放大*/
zoom: reset;
}

今天的內(nèi)容就到這里了哦~

看完了之后覺得是否強大呢，迫不及待的試試了呢？

您還可以閱讀以下文章哦~

CSS制作樂視1S手機模型[xiao]示例

JAVA實現(xiàn)帶進度條的多文件上傳

前端HTML5實現(xiàn)星空碎片炫酷導(dǎo)航

雙11到了，趕快體驗一下吧~

淘寶Buy＋給你不一樣的雙11購物體驗

前端模塊_js仿百度[帶方向感知的鼠標(biāo)滑過圖片效果]_02

在線咨詢

上一篇：前端干貨：利用css3編寫一個炫酷的波浪效果loading動畫
下一篇：「UI框架」Layui的頁面元素之form表單基本介紹

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

應(yīng)屆生4天的時間來制作一個簡單的HTML按鈕和CSS，應(yīng)該解雇他嗎？

您的項目需求