有一段时间没用vue动画了,就忘了,又仔细去看了vue官网 的过渡&动画,记录下来方便快速使用 (可以多看vue官网 过渡&动画 实现更多效果)

1、实际效果

展开收起效果.gif

2、代码

<!--css-->
.box{
height:200px;width: 200px;
background-color:black;
}
.draw-enter-active, .draw-leave-active {
transition: all 1s ease;
}
.draw-enter, .draw-leave-to /* .fade-leave-active below version 2.1.8 */ {
height: 0;
} <div id="app">
<button @click="boxshow = !boxshow">点击展开/关闭</button>
<transition name="draw"> <!--这里的name 和 css 类名第一个字段要一样-->
<div class="box" v-show="boxshow"></div>
</transition>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
boxshow:false
},
});
</script>

作者:xilong
链接:https://www.jianshu.com/p/6cd79c029167
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

vue展开过度动画的更多相关文章

  1. vue.js过度&动画、混入&插件

    1.vue  过度动画 1.过度 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件. 语法格式: < ...

  2. Vue中过度动画效果应用

    一.实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name=" ...

  3. [UWP小白日记-9]页面跳转过度动画(二)

    又打算动手写了 [UWP小白日记-6]页面跳转过度动画 上次写的,这次随着学习的进度使用新的玩法. 最近在搞GIT的学习,结果把好好的项目玩坏,都不知道当时是怎么想的拿在写的APP来玩GIT,害我重写 ...

  4. [UWP小白日记-6]页面跳转过度动画

    前言 在学习中发现页面导航默认是没有过度动画的,直接就导航过去太粗暴了( ̄へ ̄),于是打算上动画结果不言而喻自己进了坑完全不懂动画,然后就是各种疯狂(´・_・`)的搜索资料看了后终于有点头绪. 再后来 ...

  5. Vue 中的动画特效

    Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  6. Swift - UITableView展开缩放动画

    Swift - UITableView展开缩放动画 效果 源码 https://github.com/YouXianMing/Swift-Animations // // HeaderViewTapA ...

  7. UITableView的headerView展开缩放动画

    UITableView的headerView展开缩放动画 效果 源码 https://github.com/YouXianMing/Animations // // HeaderViewTapAnim ...

  8. max-height实现任意高度元素的展开收缩动画

    http://dobinspark.com.cn/ 前言: 在说到实现元素的展开收缩,通常的想法是通过控制display的元素属性和none之间的切换,虽然说功能可以实现,但是这种展开是没有任何动画的 ...

  9. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

随机推荐

  1. vue+elementUI实现权限的部门管理

    回头看写过的项目,发现以前感觉有难度的地方,现在想想很简单,在此记录一下,不对的地方欢迎吐槽!!! 复制代码 1.实现效果 2.需求分析 主要用于平台各个部门不同权限的操作,将指定的账号放到对应的权限 ...

  2. apache、nginx配置自签名证书

    一.apache: 安装apache.ssl.openssl yum -y install httpd httpd-pear mod_ssl openssl 生成证书文件 openssl genrsa ...

  3. CentOS 6.5下通过yum安装MongoDB记录

    安装MongoDB 1.创建repo vi /etc/yum.repos.d/mongodb-org-3.6.repo   [mongodb-org-3.6]   name=MongoDB Repos ...

  4. 图论--最短路--SPFA

    SPFA算法(shortest path faster algorithm)算法是西南交通大学段凡丁于1994年发表的,它在Bellman-ford算法的基础上进行了改进,使其在能够处理待负权图的单元 ...

  5. 概率dp部分题目

    记录一些比较水不值得单独写一篇blog的概率dp题目 bzoj3036 绿豆蛙的归宿 Description 随着新版百度空间的下线,Blog宠物绿豆蛙完成了它的使命,去寻找它新的归宿. 给出一个有向 ...

  6. 解决ASP.NET WebPage的CS1061报错

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="pg_CompanyInfo ...

  7. python-format方法记录

      今天写脚本,遇到了这种情况:需要上一个脚本的回参作为一个路径参数,我用的os.path.join()处理,因为这个路径参数在最后一位,但是没有考虑到如果路径参数在中间的话,这样的拼接就只能把后面的 ...

  8. centos7 源码安装nginx

    1. 安装编译所需要的工具包 yum -y install gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel 2. 安装ngi ...

  9. CentOS安装配置nginx和php

    今天买了台阿里云服务器用于日常开发测试(新人9块钱半年).系统版本CentOS 6.5 64位. 首先安装nginx: yum install nginx 参考文档: 在CentOS 6上搭建LNMP ...

  10. Java return 关键字

    一.基本概念 return一方面用在循环语句中来结束循环,另一方面用来终止函数的执行或者退出类的方法,并把控制权返回该方法的调用者.如果方法有返回类型,则return的返回该类型的值:如果没有返回值, ...