zoukankan      html  css  js  c++  java
  • vue 动画组件封装 【js 动画】

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/2.0/animate.css" rel="stylesheet">
    
        <style>
    
    
        </style>
    </head>
    <body>
    <div id="app">
        count : {{size}}
        <input type="text" v-model="inputValue">
        <button @click="press">press</button>
    
        <ul>
    
    
            <fade>
                <todo-item :content="i"
                           v-for="(i,index) in list"
                           :index="index"
                           :key="index"
                           @delete="deleteChild(index)"></todo-item>
            </fade>
    
    
    
        </ul>
    
    </div>
    
    <script>
        Vue.component('fade', {
    
            template: `
                <transition-group name="fade"
                                  appear
                                  @before-enter="handleBeforeEnter"
                                  @enter="handleEnter"
                                  appear-active-class="animated tada"
                                  :duration="{ enter: 200, leave: 200 }"
                                  enter-active-class="animated swing"
                                  leave-active-class="animated shake"
                >
                    <slot></slot>
                </transition-group>
            `,
            methods:{
                handleBeforeEnter:function (el) {
                    el.style.color = 'blue'
                },
                handleEnter(el,done) {
                    setTimeout(()=>{
                        el.style.color = 'red'
                        done()
                    },2000)
                }
            }
        })
    
        let todoItem = {
            props: ['content'],
            template: `
                <li @click="press">{{content}}</li>
            `,
            methods: {
                press(target) {
                    this.$emit('delete')
                }
            }
        }
        const app = new Vue({
            el: '#app',
            data: {
                list: ['第一', '第二'],
                inputValue: '',
                count: 0
            },
            components: {
                TodoItem: todoItem
            },
            methods: {
                press: function () {
                    // alert("press")
                    this.list.push(app.$data.inputValue)
                    this.inputValue = ''
                },
                deleteChild: function (childNode) {
                    console.log(childNode)
                    this.list.splice(childNode, 1)
                }
            },
            watch: {
                list: function (list, newlist) {
                    this.count = newlist.length
                },
                inputValue: function (oldVal, newVal) {
                    console.log(newVal)
    
                }
            },
            computed: {
                size: {
                    get() {
                        return this.count;
                    },
                    set(value) {
                        console.log(value)
                    }
                }
            }
        })
    
    
    </script>
    
    </body>
    </html>
    

      

  • 相关阅读:
    2018-2019-2 20165313 《网络对抗技术》Exp4 恶意代码分析
    2018-2019-2 20165313 Exp3 免杀原理与实践
    2018-2019-2 20165313 Exp2 后门原理与实践
    linux安装firmware-mod-kit
    暑假BUUCTF抄题记录
    手动编译Aseprite v1.2.21
    GameMaker Studio2 疑难杂症
    20181218 实验四《Python程序设计》实验报告
    20181218 实验三《Python程序设计》实验报告
    Mysql各种问题
  • 原文地址:https://www.cnblogs.com/lyr-2000/p/13892709.html
Copyright © 2011-2022 走看看