vue.js使用钩子函数实现动画效果_行动是最好的承诺的博客-程序员秘密_钩子函数实现动画

技术标签: vue  javascript  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .show{
        transition:all 0.3s ease;
    }
    </style>
    <script src='../vue221.js'></script>
</head>
<body>
    <div id="app">
    <button @click="toggle">显示和隐藏数据</button><br>
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
        <div v-if="isshow" class="show">hello vuejs</div>
    </transition>
    </div>
</body>
<script>


var vm = new Vue({
    el:'#app',
    data:{
        isshow:false
    },
    methods:{
        toggle:function(){
     
            this.isshow = !this.isshow;
        },
        beforeEnter:function(el){
     
            el.style.transform = "translate(100px,0)";
        },
        enter:function(el,done){
     
            el.offsetWidth;

            el.style.transform = "translate(0px,0)";

            done();
        },
        afterEnter:function(el){
     
            this.isshow =  !this.isshow;
        }
    }
});
</script>
</html>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u010505805/article/details/78597486

智能推荐

MOD10数据的使用_ko_ng的博客-程序员秘密_mod10数据说明

前阵子下了一年的MODIS10数据,用了MRT自动拼接了3天才把全国的数据拼接完成,公司那边一直催着将云检测的事情快点进展下去,老师这边也是一直有任务在催着,感觉自己忙的焦头烂额也没有什么实质性的工作体现,每天过的都毫无计划,真的应该静下来好好对自己的未来进行下规划了。今天上午看了一些对于MOD10的数据介绍,现在贴在博客里面,算是一个备忘。MOD10数据是一个冰雪产品。我下载的是MOD1_1671465600

开源精选:AntdFront —— React 纯 Hook 多标签微前端管理系统解决方案_Evan-Nightly的博客-程序员秘密

这可能是你们都在找的:React 纯原生纯 hook 多标签微前端管理系统。

CHROME扩展笔记之webRequest·图片拦截_slongzhang_的博客-程序员秘密_chrome.webrequest

使用webRequest首先需要在manifest权限里声明,[“webRequest”,“webRequestBlocking”,"以及监控的地址,如监控所有则:*: //*/* "]//插件监听拦截-图片chrome.webRequest.onBeforeRequest.addListener ( function(details) { // console.log(details); // 回调返回一个对象,如果对象里得cancel为true则会拦截不继续请求 return {can_1671465600

用Jedis获取Json字符串时候遇到的一个坑_荒野大码农的博客-程序员秘密

记录以下今天下午遇到的一个坑,一下午时间全花在这个问题上了。。。在用Jedis从redis中获取到Json字符串后要将它反序列化为对象。结果抛出了异常。第一个怀疑是这个Json字符串是不是格式有问题,我将这个Json字符串打印出来放到格式化的网站上,结果没问题。...

Prometheus+Grafana_九丝城主的博客-程序员秘密_prometheus+grafana

vi /etc/systemd/system/node_exporter.service[Service]ExecStart=/usr/local/node_exporter/node_exporter[Install]WantedBy=multi-user.target[Unit]Description=node_exporterAfter=network.target systemctl enable node_exportersystemctl start node_expor

随便推点

JavaScript 中的闭包_weixin_34239592的博客-程序员秘密

1. 简要介绍闭包可谓是js中的一大特色了,即使你对闭包没概念,你可能已经在不知不觉中使用到了闭包。闭包是什么,闭包就是一个函数可以访问到另一个函数的变量。这就是闭包,解释起来就这么一句话,不明白?我们来看一个简单的例子:function getName(){ var name='wenzi'; setTimeou...

MH算法拟合标准柯西分布_丶无尘的博客-程序员秘密_mh算法实现代码

1. 题目利用M-H算法从标准柯西分布中产生随机数,丢弃链的前1000个值,比较生成链观测值的十分位数和柯西分布理论10分位数的拟合情况,并画出QQ图和链的直方图。本题中提议分布取为N(xt,σ2)N(x_t, \sigma^2)N(xt​,σ2)。2. 代码展示我们首先先导入所需要的库:import numpy as npimport scipy.stats as stimport seaborn as snsimport matplotlib.pyplot as plt按照给定目标分布

chown: cannot read directory '/var/lib/mysql/': Permission denied_A-ezra的博客-程序员秘密

[docker]如何将mysql容器的数据挂载到宿主机器报 chown: cannot read directory '/var/lib/mysql/': Permission denied容器中没有执行权限 //挂载外部数据卷时,无法启动容器, 报 chown: cannot read directory '/var/lib/mysql/': Permission denied...

Uncaught TypeError: Cannot read property 'init' of undefined_hdn_kb的博客-程序员秘密_typeerror: cannot read property 'init' of undefine

在工作中有一次遇到了前端控制台报错的问题:这是我在使用zTree属性结构插件的时候遇到的问题,主要原因是:我在引入js的时候,将zTree.js放在了jquery.js的前面所导致的。解决办法:将jquey.js文件放在最前面即可。因此,我们在引入js文件的时候,如果需要引用jquery.js,则一定一定要把jquey.js文件放在做前面。...

python读取python源代码文件_python 读写excel文件操作示例【附源码下载】_weixin_39783426的博客-程序员秘密

本文实例讲述了python 读写excel文件操作。分享给大家供大家参考,具体如下:对excel文件的操作,python有第三方的工具包支持,xlutils,在这个工具包中包含了xlrd,xlwt等工具包.利用这些工具,可以方便的对excel 进行操作。2. 安装,解压下载文件之后,可以 python setup.py install3. 应用(生成EXCEL,遍历EXCEL,修改EXCEL,属性...

docker network基础_happyzwh的博客-程序员秘密

前面介绍了nginx与php两个容器间是如何进行通信的:[[email protected] ~]# docker run -d --name=php -v /www:/usr/local/nginx/html php[[email protected] ~]# docker run -d --name=nginx --link=php:php -v /www:/usr/local/nginx/html -p 81:80 nginx[[email protected] ~]# docker ps -aCONTAINER I

推荐文章

热门文章

相关标签