国外搜索引擎网站,韩漫网站建设,wordpress _the_logo,无障碍网站建设推广前景关键词#xff1a;动画封装——进行可复用一、如何封装#xff1f;1、使用#xff1a;局部组件传递数据局部组件中使用JS动画2、原理#xff1a;将动画效果完全第封装在一个名为fade的组件中#xff0c;今后如要复用#xff0c;只需要复制有其组件名的部分#…关键词动画封装——进行可复用一、如何封装1、使用局部组件传递数据局部组件中使用JS动画2、原理将动画效果完全第封装在一个名为fade的组件中今后如要复用只需要复制有其组件名的部分然后修改dom元素标签名称。使用任何样式只需要从组件中进行相应地修改无需再在全局中定义CSS动画。3、代码如下!DOCTYPE html
html langen
headmeta charsetUTF-8titleVue中的动画封装/titlescript src./vue.js/script
/head
bodydiv idrootfade :showshowdiv v-showshowhello world/div/fade fade :showshowh1 v-showshowhello world/h1/fade button clickhandleClick点击/button/div scriptVue.component(fade,{props: [show],template: transition before-enterhandleBeforeEnterenterhandleEnterslot v-ifshow/slot/transition,methods: {handleBeforeEnter: function(el){el.style.color red},handleEnter: function(el,done){setTimeout((){el.style.color greendone()},2000)}}})var vm new Vue({el: #root,data: {show: false},methods: {handleClick: function(){this.show !this.show}}})/script/body
/html试一下吧
