适用范围： vue、 v-if, v-show控制的模块切换

    效果：

    26e0m-rw4m7.gif

    屏幕录制 2019-09-09 下午4.43.10.mov

    1. <template>
    2.   <div class="box">
    3.     <div id="translate-demo" class="demo">
    4.       <div class="translate-demo-wrapper">
    5.         <transition :name="`${on}-translate-fade`">
    6.           <div class="red" v-if="on === 'go'" key="on" v-swiperight="go" v-swipeleft="back">on</div>
    7.           <div class="yellow" v-else key="off" v-swiperight="go" v-swipeleft="back">off</div>
    8.         </transition>
    9.       </div>
    10.     </div>
    11.   </div>
    12. </template>
    14. <script>
    15. export default {
    16.   data() {
    17.     return {
    18.       on: "go"
    19.     };
    20.   },
    21.   methods: {
    22.     go() {
    23.       this.on = "go";
    24.     },
    25.     back() {
    26.       this.on = "back";
    27.       console.log("后退");
    28.     }
    29.   },
    30.   computed: {},
    31.   components: {}
    32. };
    33. </script>
    35. <style lang='less' scoped>
    36. .translate-demo-wrapper {
    37.   position: relative;
    38.   height: 18px;
    39. }
    40. .translate-demo-wrapper div {
    41.   position: absolute;
    42.   width: 100vw;
    43.   height: 100vh;
    44. }
    45. .red {
    46.   background: red;
    47. }
    48. .yellow {
    49.   background: yellow;
    50. }
    51. .btn {
    52.   width: 50%;
    53.   height: 100px;
    54.   border: 1px solid red;
    55.   font-size: 25px;
    56.   margin: 0 auto;
    57. }
    58. .box {
    59.   text-align: center;
    60.   background: #e3e3e3;
    61. }
    62. // vue渐变前进
    63. .go-translate-fade-enter-active,
    64. .go-translate-fade-leave-active {
    65.   transition: all 1s;
    66. }
    67. .go-translate-fade-enter-active {
    68.   opacity: 1;
    69.   transform: translateX(0);
    70. }
    71. .go-translate-fade-enter,
    72. .go-translate-fade-leave-active {
    73.   opacity: 0.2;
    74. }
    75. .go-translate-fade-enter {
    76.   transform: translateX(100vw);
    77. }
    78. .go-translate-fade-leave-active {
    79.   transform: translateX(-100vw);
    80. }
    82. // 渐变后退
    83. .back-translate-fade-enter-active,
    84. .back-translate-fade-leave-active {
    85.   transition: all 1s;
    86. }
    87. .back-translate-fade-enter-active {
    88.   opacity: 1;
    89.   transform: translateX(0);
    90. }
    91. .back-translate-fade-enter,
    92. .back-translate-fade-leave-active {
    93.   opacity: 0.2;
    94. }
    95. .back-translate-fade-enter {
    96.   transform: translateX(-100vw);
    97. }
    98. .back-translate-fade-leave-active {
    99.   transform: translateX(100vw);
    100. }
    101. </style>

    vue官网源链接，代码需要去控制台看源码才能找到：