绉诲姩绔竷灞€

Posted 2020-11-13

鏍囩锛?a href='http://www.mamicode.com/so/1/Fix' title='Fix'>Fix   gettime   娓叉煋   imp   date()   dir   ntb   duration   ret   

绉诲姩绔竷灞€

rem鍗曚綅

1 import 鈥?/span>js/rem.js鈥?/span>;

 寮曞叆 rem.js 鏂囦欢鍚庯紝css 涓氨鍙互鐩存帴鍐?rem 鍗曚綅浜嗭紝鏀瑰彉绉诲姩绔澶囨椂锛屽楂樹細绛夋瘮渚嬫洿鏂般€?/p>

 

flexbox甯冨眬锛堝脊鎬х洅甯冨眬锛?/p>

 1 *{
 2     margin: 0;
 3     padding:0;
 4 }
 5 html,body{
 6     height: 100%;
 7 }
 8 li{
 9     list-style: none;
10 }
11 body{
12     #container{
13         height: 100%;
14         display: flex;
15         flex-direction: column;
16         #header,#footer{
17             background: yellowgreen;
18             //渚ц酱锛堟按骞筹級灞呬腑
19             align-items: center;
20         }
21         #header{
22             display: flex;
23             height: 1rem;
24             //椤跺湪宸﹀彸涓よ竟
25             justify-content: space-between;
26             line-height: 1rem;
27             li{
28                 padding: 0 10px;
29             }
30         }
31         #footer{
32             display: flex;
33             height:1.2rem;
34             justify-content: space-around;
35             li{
36                 text-align: center;
37             }
38         }
39         #main{
40             flex:1;
41         }
42 
43         #Menu{
44             position: fixed;
45 
46             .mask{
47                 position: fixed;
48                 left:0;
49                 right: 0;
50                 top: 1rem;
51                 bottom:1.2rem;
52                 background: red;
53             }
54             .bar{
55                 position: fixed;
56                 width: 5rem;
57                 right: 0;
58                 top: 1rem;
59                 bottom:1.2rem;
60                 background: blueviolet;
61             }
62         }
63     }
64 }

 

font-awesome 瀛椾綋鍥炬爣

1 import 鈥?/span>./assets/font-awesome-4.7.0/css/font-awesome.min.css鈥?/span>;

1 <font class="fa fa-home"></font>

 

transition 杩囨浮

Vue 鍦ㄦ彃鍏ャ€佹洿鏂版垨鑰呯Щ闄?DOM 鏃讹紝鎻愪緵澶氱涓嶅悓鏂瑰紡鐨勫簲鐢ㄨ繃娓℃晥鏋溿€?/p>

transition 鏄?vue 鎻愪緵鐨勭粍浠讹紝杩欎釜缁勪欢鐨勪綔鐢ㄦ槸缁欏叾瀛愯妭鐐规坊鍔犲姩鐢绘晥鏋溿€?/p>

 

 1 <template>
 2   <div id="Menu">
 3     <transition
 4       enter-class
 5       enter-active-class="animated fadeIn"
 6       enter-to-class
 7       leave-class
 8       leave-active-class="animated fadeOut"
 9       leave-to-class
10     >
11     
12       <div class="mask" v-if="show"></div>  <!-- 鍔犺浇鍔ㄧ敾鐨勬帶浠?-->
13     </transition>
14     <transition
15       enter-class
16       enter-active-class="animated fadeInRight"
17       enter-to-class
18       leave-class
19       leave-active-class="animated fadeOutRight"
20       leave-to-class
21     >
22       <div class="bar" v-if="show"></div>  <!-- 鍔犺浇鍔ㄧ敾鐨勬帶浠?-->
23     </transition>
24   </div>
25 </template>
26 <script>
27 export default {
28   data() {
29     return {
30       show: false
31     };
32   },
33   mounted() {
34     // setTimeout(() => {
35     //   this.show = true;
36     // }, 3000);
37     //$on鏄垱寤轰簨浠?/span>
38     this.$eventbus.$on("abc",function(){
39         this.show = !this.show;
40     }.bind(this))
41   }
42 };
43 </script>>

褰撳搴旂殑浜嬩欢琚Е鍙戜箣鍚庯紙娑夊強鍒癳ventbus锛岃Е鍙戜簨浠剁殑鎸夐挳鍦╤eader椤甸潰锛屾病寰€杩欐斁锛夛紝div:mark涓巇iv锛歜ar灏变細瀹炵幇娣″叆娣″嚭鐨勫姩鐢汇€?/p>

v-if 鍜?v-show 閮藉彲浠ュ疄鐜板姩鐢汇€?/p>

:duration="10000" 鍙缃姩鐢绘椂闀匡紝鍗曚綅姣銆?/p>

enter-class 鍦ㄧ涓€甯т箣鍚庡氨鍒犻櫎浜嗭紱

enter-to-class 瀹氫箟杩涘叆杩囨浮鐨勭粨鏉熺姸鎬併€傚湪鍏冪礌琚彃鍏ヤ箣鍚庝笅涓€甯х敓鏁?(涓庢鍚屾椂 v-enter 琚Щ闄?锛屽湪杩囨浮/鍔ㄧ敾瀹屾垚涔嬪悗绉婚櫎銆?/p>

 

---

transition-group

transition鍙兘鏈?涓垨1涓瓙鑺傜偣锛岃€宼ransition-group鍙互鏈夐浂涓垨澶氫釜瀛愯妭鐐广€?/p>

寰幆娓叉煋鏃讹紝蹇呴』鍐檏ey锛屽苟涓攌ey鐨勫€兼槸鍞竴鏍囪瘑绗︼紙涓嶈鐢ㄦ暟缁勪笅鏍囷級銆?/p>

 1 <template>
 2   <div id="main">
 3     <input type="text" v-model="duang" />
 4     <button @click="fn">娣诲姞</button>
 5     <transition-group
 6       enter-class
 7       enter-active-class="animated fadeIn"
 8       enter-to-class
 9 
10       leave-class
11       leave-active-class="animated fadeOut"
12       leave-to-class
13       
14       v-on:before-enter="a"
15       v-on:enter="b"
16       v-on:after-enter="c"
17     >
18       <li v-for="(item,index) in arr" :key="item.id">
19         {{item.text}}
20         <button @click="fn2(index)">鍒犻櫎</button>
21       </li>
22     </transition-group>
23   </div>
24 </template>>
25 <script>
26 export default {
27   data() {
28     return {
29       duang: "",
30       arr: []
31     };
32   },
33   methods: {
34     fn() {
35       this.arr.push({
36         text: this.duang,
37         id: new Date().getTime()
38       });
39     },
40     fn2(index) {
41       this.arr.splice(index, 1);
42     },
43     a: function(el) {
44       console.log("杩涘叆鍓?/span>", el);
45     },
46     b: function(el,done) {
47       console.log("杩涘叆銆傘€傘€?/span>", el);
48       setTimeout(function() {
49            done();       //done()鏀句负杩涘叆涔嬪悗鎵ц鐨勬柟娉曪紝涓嶅姞鐨勮瘽涓嶄細鍦熷徃杩涘叆鍚庤繖鍙ヨ瘽銆?/span>
50       }, 500);
51     },
52     c: function(el) {
53       console.log("杩涘叆鍚?/span>", el);
54     }
55   }
56 };
57 </script>>

 

 

---

 

閽╁瓙鍑芥暟

鍔ㄧ敾鍥炶皟鍑芥暟锛堥挬瀛愬嚱鏁帮級锛屽姩鐢绘墽琛岀殑杩囩▼涓紝鑷姩瑙﹀彂鐨勪竴浜涘嚱鏁般€?/p>

鏃㈠彲浠ュ啓鍦?transition 涓紝涔熷彲浠ュ啓鍦?transition-group 涓€?/p>

 

 

 1 <transition
 2     v-on:before-enter="beforeEnter"    //杩涘叆涔嬪墠
 3     v-on:enter="enter"                       //杩涘叆鏃?..
 4     v-on:after-enter="afterEnter"        //杩涘叆涔嬪悗
 5     v-on:enter-cancelled="enterCancelled" //杩涘叆鍚庡彇娑堬紙涓€鑸笉鐢級
 6 
 7     v-on:before-leave="beforeLeave"  //绂诲紑涔嬪墠
 8     v-on:leave="leave"                      //绂诲紑鏃?..
 9     v-on:after-leave="afterLeave"      //绂诲紑涔嬪悗
10     v-on:leave-cancelled="leaveCancelled" //绂诲紑鍚庡彇娑堬紙涓€鑸笉鐢級
11 >     

 

閽╁瓙鍑芥暟鍒嗕袱缁勶細

• enter 涓哄垱寤鸿妭鐐瑰墠鑷姩鎵ц銆佸垱寤鸿妭鐐硅繃绋嬩腑鑷姩鎵ц銆佸垱寤鸿妭鐐瑰畬姣曟椂鑷姩鎵ц銆佸垱寤鸿妭鐐瑰彇娑堟椂鑷姩鎵ц銆?/li>
• leave 涓哄垹闄よ妭鐐瑰墠鑷姩鎵ц銆佸垹闄よ妭鐐硅繃绋嬩腑鑷姩鎵ц銆佸垹闄よ妭鐐瑰畬姣曟椂鑷姩鎵ц銆佸垹闄よ妭鐐瑰彇娑堟椂鑷姩鎵ц銆?/li>

 1 methods: {
 2     beforeEnter: function (el) {
 3         console.log(鈥?/span>杩涘叆鍓?/span>鈥?/span>, el)
 4     },
 5     enter: function (el, done) {
 6         console.log(鈥?/span>杩涘叆...鈥?/span>, el)
 7         setTimeout(()=>{ // 瑕佺粰鍔ㄧ敾鏁堟灉棰勭暀鏃堕暱锛屽鏋滅灛闂磀one()锛岄偅涔堢湅涓嶅埌鍔ㄧ敾鏁堟灉銆?/span>
 8             done() // 琛ㄧず瀹屾垚鍔ㄧ敾
 9         }, 2000)
10     },
11     afterEnter: function(el){
12         console.log(鈥?/span>杩涘叆瀹屾垚鈥?/span>, el)
13     },
14     enterCancelled: function(el){
15         console.log(鈥?/span>鍙栨秷杩涘叆鈥?/span>, el)
16     }
17 }