hide show vue 动画_（Vue动效）7.Vue中动画封装

最新推荐文章于 2022-07-13 13:12:01 发布

weixin_39562579

最新推荐文章于 2022-07-13 13:12:01 发布

阅读量69

点赞数

文章标签： hide show vue 动画

本文链接：https://blog.csdn.net/weixin_39562579/article/details/112380342

版权

关键词：动画封装——进行可复用

一、如何封装？

1、使用：局部组件传递数据+局部组件中使用JS动画

2、原理：将动画效果完全第封装在一个名为<fade>的组件中，今后如要复用，只需要复制有其组件名的部分，然后修改dom元素标签名称。使用任何样式，只需要从组件中进行相应地修改，无需再在全局中定义CSS动画。

3、代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue中的动画封装</title>
 <script src="./vue.js"></script>
</head>
<body>
 <div id="root">
   <fade :show="show">
      <div v-show="show">hello world</div>
   </fade>	
   <fade :show="show">
      <h1 v-show="show">hello world</h1>
   </fade>	
   <button @click="handleClick">点击</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: {
       handleClick: function(){
	 this.show = !this.show
      }
     }
   })
  </script>
 </body>
</html>

试一下吧：

weixin_39562579

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hide show vue 动画_（Vue动效）7.Vue中动画封装

关键词：动画封装——进行可复用一、如何封装？1、使用：局部组件传递数据+局部组件中使用JS动画2、原理：将动画效果完全第封装在一个名为<fade>的组件中，今后如要复用，只需要复制有其组件名的部分，然后修改dom元素标签名称。使用任何样式，只需要从组件中进行相应地修改，无需再在全局中定义CSS动画。3、代码如下：<!DOCTYPE html><html lang="...
复制链接

扫一扫