• 引入
  • 代码演示
    • 动画
  • API

    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