Vue动画工具及特效
vue动画部分,这部分难度主要在于动画代码的固定形式,比较繁琐复杂,举出几个实例。 1.单元素/组件的过渡 资源包: < script src = "node_modules/vue/dist/vue.js" > < / script > body部分: 1.若想反复点击实现隐藏/出现状态循环交替,再标签内设置v-if=“flag”,在data中设置flag=false/true(false代表初始成隐藏标签,true为显示标签),在触发点击事件的标签上添加:@click=flag=!flag,即每次点击呈现相对立的状态。 2.transition标签包裹需要被动画控制的元素。 3.若代码页中有多个不同的动画效果,可以给transition标签命名,也就是属性name="",并与style中的选择器连用(具体操作样式部分说。) < body > < div id = "root" > < button @click = "flag=!flag" > 点点点 < / button > //transition包裹需要被动画控制的元素 //再vue中,transition可以是一个标签(元素) < transition > < h1 v - if = "flag" > 王阿赫 < / h1 > < / transition > < transition name = "my" > <