初识 Vue(28)---(Vue 中的动画封装)

简介: Vue 中的动画封装功能:点击按钮,hello world 出现,再点击隐藏 Vue 中的动画封装 .

Vue 中的动画封装

功能:点击按钮,hello world 出现,再点击隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 中的动画封装</title>
    <script src = './vue.js'></script>
    <style>
     .v-enter,.v-leave-to{
      opacity:0;
     }
     .v-enter-active,.v-leave-active{
      transition: opacity 1s;
     }
   </style>
</head>
<body>
    <div id ='root'>
      <transition>
        <div v-show="show" >
        hello world
        </div>
      </transition>
      <button @click="handleBtnClick">toggle</button>
    </div>

    <script>
   
  var vm = new Vue({
        el:"#root",
        data:{
            show:false
        },
        methods:{
            handleBtnClick:function(){
             this.show = !this.show   
                }
            }
        })
    
        
  
    </script>   
</body>
</html>

输出:点击--出现--隐藏

                  

封装这个动画功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 中的动画封装</title>
    <script src = './vue.js'></script>
    <style>
     .v-enter,.v-leave-to{
      opacity:0;
     }
     .v-enter-active,.v-leave-active{   
      transition: opacity 1s;
     }
   </style>
</head>
<body>
    <div id ='root'>
      
     <fade  :show="show"> //等于父组件的变量  
        <div>   
        hello world
        </div>
     </fade>
      <button @click="handleBtnClick">toggle</button>
    </div>

    <script>
    Vue.component('fade',{
      props:['show'],
      template:`
        <transition>
            <slot v-if="show"> </slot>     //判断外部传来的DOM是否要被显示
        </transition>
        ` 
    })
    
  var vm = new Vue({
        el:"#root",
        data:{
            show:false
        },
        methods:{
            handleBtnClick:function(){
             this.show = !this.show   
                }
            }
        })
    
        
  
    </script>   
</body>
</html>

输出:点击--出现--隐藏

                  

 

封装的好处:不需再设置动画样式,直接输入内容就好

<body>
    <div id ='root'>
      
     <fade  :show="show"> 
        <div>   
        hello world
        </div>
     </fade>

     <fade  :show="show"> 
        <h1>   
        hello world
        </h1>
     </fade>
      <button @click="handleBtnClick">toggle</button>
    </div>

输出:

        

 

可以将 样式 也封装进去,只能使用 JS 动画实现(推荐)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 中的动画封装</title>
    <script src = './vue.js'></script>
    <!-- <style>
     .v-enter,.v-leave-to{
      opacity:0;
     }
     .v-enter-active,.v-leave-active{
      transition: opacity 1s;
     }
       </style> -->
</head>
<body>
    <div id ='root'>
      
     <fade  :show="show"> 
        <div>   
        hello world
        </div>
     </fade>

     <fade  :show="show"> 
        <h1>   
        hello world
        </h1>
     </fade>
      <button @click="handleBtnClick">toggle</button>
    </div>

    <script>
    Vue.component('fade',{
      props:['show'],
      template:`
        <transition @before-enter="handleBeforeEnter"
        @enter="handleEnter"
        >
        <slot v-if="show"> </slot>    
        </transition>
        ` ,
        methods:{
          handleBeforeEnter:function(el){
              el.style.color = 'red'
          },
          handleEnter:function(el,done){
            setTimeout(() =>{
                el.style.color = 'green'
                done()
            },2000)
          }
        }
    })

  var vm = new Vue({
        el:"#root",
        data:{
            show:false
        },
        methods:{
            handleBtnClick:function(){
             this.show = !this.show   
                }
            }
        })
    
        
  
    </script>   
</body>
</html>

输出:点击---显示---2秒后变绿色(将样式都封装到 fade 组件里面,外部只需调用 fade 组件即可)

     

目录
相关文章
|
4天前
|
前端开发 JavaScript
Vue底层实现原理总结
Vue底层实现原理总结
|
9天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
70 7
使用 Vue CLI 脚手架生成 Vue 项目
|
7天前
|
JavaScript
|
7天前
|
存储 JavaScript API
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
14 2
|
10天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
14 1
|
11天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
25 1
|
3天前
|
JavaScript 前端开发
Vue躬行记(7)——渲染函数和JSX
Vue躬行记(7)——渲染函数和JSX
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1004 0
|
12天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
20 3
|
12天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
26 2