chore: more examples
This commit is contained in:
Evan You
85
packages/vue/examples/transition/list.html
Normal file
85
packages/vue/examples/transition/list.html
Normal file
@@ -0,0 +1,85 @@
|
||||
<script src="https://cdn.jsdelivr.net/lodash/4.3.0/lodash.min.js"></script>
|
||||
<script src="../../dist/vue.global.js"></script>
|
||||
|
||||
<div id="app">
|
||||
<button @click="insert">insert at random index</button>
|
||||
<button @click="reset">reset</button>
|
||||
<button @click="shuffle">shuffle</button>
|
||||
<transition-group tag="ul" name="fade" class="container">
|
||||
<item v-for="item in items"
|
||||
class="item"
|
||||
:msg="item"
|
||||
:key="item"
|
||||
@rm="remove(item)">
|
||||
</item>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const getInitialItems = () => [1, 2, 3, 4, 5]
|
||||
let id = getInitialItems().length + 1
|
||||
|
||||
const Item = {
|
||||
props: ['msg'],
|
||||
template: `<div>{{ msg }} <button @click="$emit('rm')">x</button></div>`
|
||||
}
|
||||
|
||||
const App = {
|
||||
components: {
|
||||
Item
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
items: getInitialItems()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
insert () {
|
||||
const i = Math.round(Math.random() * this.items.length)
|
||||
this.items.splice(i, 0, id++)
|
||||
},
|
||||
reset () {
|
||||
this.items = getInitialItems()
|
||||
},
|
||||
shuffle () {
|
||||
this.items = _.shuffle(this.items)
|
||||
},
|
||||
remove (item) {
|
||||
const i = this.items.indexOf(item)
|
||||
if (i > -1) {
|
||||
this.items.splice(i, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Vue.createApp().mount(App, '#app')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
}
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: #f3f3f3;
|
||||
border: 1px solid #666;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* 1. declare transition */
|
||||
.fade-move, .fade-enter-active, .fade-leave-active {
|
||||
transition: all .5s cubic-bezier(.55,0,.1,1);
|
||||
}
|
||||
/* 2. declare enter from and leave to state */
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: scaleY(0.01) translate(30px, 0);
|
||||
}
|
||||
/* 3. ensure leaving items are taken out of layout flow so that moving
|
||||
animations can be calculated correctly. */
|
||||
.fade-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
132
packages/vue/examples/transition/modal.html
Normal file
132
packages/vue/examples/transition/modal.html
Normal file
@@ -0,0 +1,132 @@
|
||||
<script src="../../dist/vue.global.js"></script>
|
||||
|
||||
<!-- template for the modal component -->
|
||||
<script type="text/x-template" id="modal-template">
|
||||
<transition name="modal">
|
||||
<div v-if="show" class="modal-mask">
|
||||
<div class="modal-wrapper">
|
||||
<div class="modal-container">
|
||||
|
||||
<div class="modal-header">
|
||||
<slot name="header">
|
||||
default header
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<slot name="body">
|
||||
default body
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<slot name="footer">
|
||||
default footer
|
||||
<button class="modal-default-button" @click="$emit('close')">
|
||||
OK
|
||||
</button>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</script>
|
||||
<script>
|
||||
const Modal = {
|
||||
template: '#modal-template',
|
||||
props: ['show']
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- modal container that lives outside of app root -->
|
||||
<div id="modal-container"></div>
|
||||
|
||||
<!-- app -->
|
||||
<div id="app">
|
||||
<button id="show-modal" @click="showModal = true">Show Modal</button>
|
||||
<portal target="#modal-container">
|
||||
<!-- use the modal component, pass in the prop -->
|
||||
<modal :show="showModal" @close="showModal = false">
|
||||
<template #header>
|
||||
<h3>custom header</h3>
|
||||
</template>
|
||||
</modal>
|
||||
</portal>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const App = {
|
||||
components: { Modal },
|
||||
data: {
|
||||
showModal: false
|
||||
}
|
||||
}
|
||||
Vue.createApp().mount(App, '#app')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
z-index: 9998;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
display: table;
|
||||
transition: opacity .3s ease;
|
||||
}
|
||||
|
||||
.modal-wrapper {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
width: 300px;
|
||||
margin: 0px auto;
|
||||
padding: 20px 30px;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
|
||||
transition: all .3s ease;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin-top: 0;
|
||||
color: #42b983;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.modal-default-button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/*
|
||||
* The following styles are auto-applied to elements with
|
||||
* transition="modal" when their visibility is toggled
|
||||
* by Vue.js.
|
||||
*
|
||||
* You can easily play with the modal transition by editing
|
||||
* these styles.
|
||||
*/
|
||||
|
||||
.modal-enter-from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-enter-from .modal-container,
|
||||
.modal-leave-to .modal-container {
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user