整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          應(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


          主站蜘蛛池模板: 91大神在线精品视频一区| 欧洲精品码一区二区三区| 一区二区三区四区无限乱码| 久久精品国产一区二区三| 日本一区高清视频| 国产精品无码一区二区在线观| 久久人妻内射无码一区三区| 中文字幕不卡一区| 亚洲一区二区三区乱码A| 国产精品久久久久一区二区三区| 久久久久人妻一区二区三区| 国产精品毛片一区二区三区| 真实国产乱子伦精品一区二区三区| 国产成人AV区一区二区三| 狠狠综合久久av一区二区| 亚洲乱色熟女一区二区三区蜜臀| 精品人无码一区二区三区| 日韩高清国产一区在线| 91video国产一区| 亚洲一区二区三区四区视频| 精品无码一区二区三区亚洲桃色| 亚洲欧洲一区二区| 国产在线乱子伦一区二区| 日本免费一区二区在线观看| 交换国产精品视频一区| 亚洲国产激情在线一区| 国内精品视频一区二区八戒| 日韩精品一区二区三区毛片| 国产一区二区三区不卡在线看| 国产成人一区二区三区免费视频 | 波多野结衣一区二区免费视频 | 国产精品一区视频| 国模视频一区二区| 一区二区三区四区在线播放 | 亚洲国产激情一区二区三区| 一区二区三区免费看| 久久精品国产一区二区三 | 日韩精品电影一区| 精品国产一区二区三区久久蜜臀 | 亚洲av色香蕉一区二区三区蜜桃| 精产国品一区二区三产区|