整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
簡單”的技術人員會自動承擔一點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 切換。
注：對于這些在過渡中切換的類名來說，如果你使用一個沒有名字的 <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
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
