Transition 动画

Scan me!

复用动画切换组件

引入

  1. import { Transition } from 'mand-mobile'
  3. Vue.component(Transition.name, Transition)

代码演示

动画

Transition 动画 - 图2

  1.         <template>
  2.   <div class="md-example-child md-example-child-transition md-example-child-transition-1">
  3.     <md-button @click="showPopUp(0)">Fade</md-button>
  4.     <md-popup
  5.       v-model="isPopupShow[0]"
  6.       transition="md-fade"
  7.     >
  8.       <div class="md-example-popup md-example-popup-center">
  9.         Fade
  10.       </div>
  11.     </md-popup>
  13.     <md-button @click="showPopUp(1)">Fade Up</md-button>
  14.     <md-popup
  15.       v-model="isPopupShow[1]"
  16.       transition="md-fade-up"
  17.     >
  18.       <div class="md-example-popup md-example-popup-center">
  19.         Fade Up
  20.       </div>
  21.     </md-popup>
  23.     <md-button @click="showPopUp(2)">Fade Down</md-button>
  24.     <md-popup
  25.       v-model="isPopupShow[2]"
  26.       transition="md-fade-down"
  27.     >
  28.       <div class="md-example-popup md-example-popup-center">
  29.         Fade Down
  30.       </div>
  31.     </md-popup>
  33.     <md-button @click="showPopUp(3)">Fade Left</md-button>
  34.     <md-popup
  35.       v-model="isPopupShow[3]"
  36.       transition="md-fade-left"
  37.     >
  38.       <div class="md-example-popup md-example-popup-center">
  39.         Fade Left
  40.       </div>
  41.     </md-popup>
  43.     <md-button @click="showPopUp(4)">Fade Right</md-button>
  44.     <md-popup
  45.       v-model="isPopupShow[4]"
  46.       transition="md-fade-right"
  47.     >
  48.       <div class="md-example-popup md-example-popup-center">
  49.         Fade Right
  50.       </div>
  51.     </md-popup>
  53.     <md-button @click="showPopUp(5)">Bounce</md-button>
  54.     <md-popup
  55.       v-model="isPopupShow[5]"
  56.       transition="md-bounce"
  57.     >
  58.       <div class="md-example-popup md-example-popup-center">
  59.         Bounce
  60.       </div>
  61.     </md-popup>
  63.     <md-button @click="showPopUp(6)">Punch</md-button>
  64.     <md-popup
  65.       v-model="isPopupShow[6]"
  66.       transition="md-punch"
  67.     >
  68.       <div class="md-example-popup md-example-popup-center">
  69.         Punch
  70.       </div>
  71.     </md-popup>
  73.     <md-button @click="showPopUp(7)">Zoom</md-button>
  74.     <md-popup
  75.       v-model="isPopupShow[7]"
  76.       transition="md-zoom"
  77.     >
  78.       <div class="md-example-popup md-example-popup-center">
  79.         Zoom
  80.       </div>
  81.     </md-popup>
  83.     <md-button @click="showPopUp(8)">Slide Up</md-button>
  84.     <md-popup
  85.       v-model="isPopupShow[8]"
  86.       transition="md-slide-up"
  87.     >
  88.       <div class="md-example-popup md-example-popup-center">
  89.         Slide Up
  90.       </div>
  91.     </md-popup>
  93.     <md-button @click="showPopUp(9)">Slide Down</md-button>
  94.     <md-popup
  95.       v-model="isPopupShow[9]"
  96.       transition="md-slide-down"
  97.     >
  98.       <div class="md-example-popup md-example-popup-center">
  99.         Slide Down
  100.       </div>
  101.     </md-popup>
  103.     <md-button @click="showPopUp(10)">Slide Left</md-button>
  104.     <md-popup
  105.       v-model="isPopupShow[10]"
  106.       transition="md-slide-left"
  107.     >
  108.       <div class="md-example-popup md-example-popup-center">
  109.         Slide Left
  110.       </div>
  111.     </md-popup>
  113.     <md-button @click="showPopUp(11)">Slide Right</md-button>
  114.     <md-popup
  115.       v-model="isPopupShow[11]"
  116.       transition="md-slide-right"
  117.     >
  118.       <div class="md-example-popup md-example-popup-center">
  119.         Slide Right
  120.       </div>
  121.     </md-popup>
  122.   </div>
  123. </template>
  125. <script>
  126. import {Popup, Button} from 'mand-mobile'
  128. export default {
  129.   name: 'transition-demo',
  130.   components: {
  131.     [Popup.name]: Popup,
  132.     [Button.name]: Button,
  133.   },
  134.   data() {
  135.     return {
  136.       isPopupShow: [],
  137.     }
  138.   },
  139.   methods: {
  140.     showPopUp(type) {
  141.       this.$set(this.isPopupShow, type, true)
  142.     },
  143.   },
  144. }
  146. </script>
  148. <style lang="stylus">
  149. .md-example-child-transition-1
  150.   float left
  151.   width 100%
  152.   .md-button
  153.     margin-bottom 20px
  154.   .md-example-popup
  155.     position relative
  156.     font-size 28px
  157.     font-family DINAlternate-Bold
  158.     font-weight 500
  159.     box-sizing border-box
  160.     text-align center
  161.     background-color #FFF
  162.   .md-example-popup-center
  163.     padding 50px
  164.     border-radius radius-normal
  165. </style>
  166.  
  167.

API

md-transition组件为Vue内置transtion的一层封装，支持所有Transition的属性参数。

其中内置动画name参数如下：

  • md-fade
  • md-fade-up
  • md-fade-down
  • md-fade-left
  • md-fade-right
  • md-slide-up
  • md-slide-down
  • md-slide-left
  • md-slide-right
  • md-bounce
  • md-punch
  • md-zoom