Vue_动画封装

雨点打透心脏的1/2处 2022-05-20 23:30 214阅读 0赞

我们写一个动画效果，如果在页面多处调用，就可以封装在一个组件里。使用插槽的形式。

eg：

<fade :show='showfade'>
       <div>hello  world</div>
    </fade>
    
    <fade :show='showfade'>
      <h1>hello  world</h1>
    </fade>
    <button @click = 'fadeClick'>动画封装</button>
    
    methods:{
     fadeClick:function(){
         this.showfade = !this.showfade;
     }
    }
    //往动画组件传值'showfade',传的是表达式，要加冒号

我们定义的动画插件叫fade，需要执行的动画要包含在fade标签里，同时向fade组件传入控制显示隐藏的参数

在fade组件中：

<template>
      <div class="fade">
          <transition @before-enter='fadebeforeEnterClick' @enter='fadeEnterClick' @after-enter='fadeafterEnterClick' >   
          <slot v-if='show'></slot>
          </transition>
      </div>
    </template>
    <script> export default{ props:['show'], data(){ return{ show:this.show } }, methods:{ fadebeforeEnterClick:function(el){ el.style.color ='red' }, fadeEnterClick:function(el,done){ setTimeout(()=>{ el.style.color = 'green' },2000), setTimeout(()=>{ done() },4000) }, fadeafterEnterClick:function(el){ el.style.color='#000' } } } </script>
    <style scoped> h1 { color:#42b983; } </style>

当然，我们也可以用css动画定义在style中。效果：  
![这里写图片描述][70]  
![这里写图片描述][70 1]  
![这里写图片描述][70 2]

[70]: /images/20220521/1561f7eb791f4b29ad96e324e2ee5f4b.png
[70 1]: /images/20220521/c3b6e5ad489e4569b0287354804e816d.png
[70 2]: /images/20220521/fca8d78dd9cc44848e391279683d7500.png

发表评论取消回复

表情：

评论列表（有 0 条评论，214人围观）

还没有评论，来说两句吧...

相关阅读

相关 js动画封装

js动画封装凡是可以看到过渡效果的基本都可以用到js动画，都能引用 <!-- ani() 作用：动画给某个元素查看某个css 属性值

超、凢脫俗/ 2023年06月25日 10:08/ 0 赞/ 2 阅读

相关如何实现vue中的列表动画，如何封装vue动画

文章目录一、vue中的列表动画如何实现列表动画原理: 二、vue中如何封装动画第1个版本：css动

忘是亡心i/ 2022年10月22日 02:47/ 0 赞/ 215 阅读

相关 Vue封装回到顶部公共组件(动画过渡)-案例

演示 ![20210805181920513.gif][] > Top.vue <template> <div class="goTop" v-s

梦里梦外;/ 2022年09月03日 05:15/ 0 赞/ 213 阅读

相关 JS动画封装

简单的运动函数 var demo1=document.getElementById("demo1"); demo1.onmouseover=funct

叁歲伎倆/ 2022年08月04日 05:22/ 0 赞/ 174 阅读

相关 JavaScript匀速动画封装

HTML部分 <span style="color:000000"><!doctype html> <html lang="en"> <head> <meta

女爷i/ 2022年06月01日 04:21/ 0 赞/ 229 阅读

相关 Vue_动画封装

我们写一个动画效果，如果在页面多处调用，就可以封装在一个组件里。使用插槽的形式。 eg： <fade :show='showfade'> <div>h

雨点打透心脏的1/2处/ 2022年05月20日 23:30/ 0 赞/ 215 阅读

相关 vue中用组件封装过渡动画

组件中要有props接收一个值，比如：show；组件的template中transition和slot的结合，可以接收父组件中的标签；过渡效果通过js钩子函数实现。这样就可以实

àì夳堔傛蜴生んèń/ 2022年04月15日 04:16/ 0 赞/ 319 阅读

相关 Vue学习笔记5.7 封装过渡动画

<!DOCTYPE html> <html> <head> <meta charset="utf-8" />

た入场券/ 2022年03月20日 13:58/ 0 赞/ 281 阅读

相关封装animate动画

<style type="text/css"> { margin: 0; padding: 0; }

一时失言乱红尘/ 2021年09月02日 09:49/ 0 赞/ 457 阅读

相关 Vue - Vue中动画封装

Vue中动画封装一 . css动画的封装二 . js动画的封装一 . css动画的封装 1. 动画封装模板组件定义设置：（1）

川长思鸟来/ 2021年07月25日 15:29/ 0 赞/ 417 阅读