transition.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
  7. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  8. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  9. <title>vuetify demo</title>
  10. <style>
  11. [v-cloak] {
  12. display: none;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div id="app" v-cloak>
  18. <v-app>
  19. <v-content>
  20. <v-container v-init-context-vars='{expand: false}'>
  21. <v-btn @click="test = !test">show</v-btn>
  22. <div is="table">
  23. <div is="tr">
  24. <div is="td">Title</div>
  25. </div>
  26. <div is="tr" >
  27. <div is="td">
  28. <v-divider></v-divider>
  29. <v-expand-transition>
  30. <div v-if="test">
  31. <div>
  32. <v-card>
  33. <h1>Hello</h1>
  34. </v-card>
  35. </div>
  36. </div>
  37. </v-expand-transition>
  38. </div>
  39. </div>
  40. </div>
  41. </v-container>
  42. </v-content>
  43. </v-app>
  44. </div>
  45. <script src="http://localhost:3080/app.js"></script>
  46. <script src="http://localhost:3100/app.js"></script>
  47. </body>
  48. </html>