从隐藏到显现

从显现到隐藏

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>Vue中的动画</title>

         <style>

             .fade-enter,

             .fade-leave-to {

                 opacity: 0;

             }

             .fade-enter-active,

             .fade-leave-active {

                 transition: opacity 3s;

             }

         </style>

     </head>

     <body>

         <div id="app">

             <transition name="fade">

                 <div v-if="show">hello world</div>

             </transition>

             <button @click="handleBtnClick">change</button>

         </div>

         <!-- 开发环境版本，包含了用帮助的命令行警告 -->

         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

         <script type="text/javascript">

             var app = new Vue({

                 el: '#app',

                 data:　{

                     show: true

                 },

                 methods: {

                     handleBtnClick: function() {

                         this.show = !this.show;

                     }

                 }

             })

         </script>

     </body>

 </html>

动画由transition标签包裹，class中的名字由transition的name属性来定，例如name = "fade",则class名为.fade-enter,如果没有name,则默认class名为v-, 例如.v-enter, .v-enter-active

vue css动画原理的更多相关文章

  1. Vue的css动画原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue中css动画原理

    显示原理: <transition name='fade'> <div v-if='show'>hello world</div> </transition& ...

  3. CSS动画原理及硬件加速

    一.图层 图层即层叠上下文,具体概念和应用大家可以看我之前转自张鑫旭大神博客的<CSS层叠上下文和层叠顺序>,这里我们简单复习一下产生层叠上下文的原因. 1.根层叠上下文 指的是页面根元素 ...

  4. 36纯 CSS 动画原理，在页面上表现日蚀现象

    原文地址:https://segmentfault.com/a/1190000015070543 感想: 动画,背景颜色 HTML code: <div class="sky" ...

  5. 如何利用 CSS 动画原理，在页面上表现日蚀现象

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OELvrK 可交互视频教 ...

  6. 前端每日实战：36# 视频演示如何利用 CSS 动画原理，在页面上表现日蚀现象

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OELvrK 可交互视频教程 此视频 ...

  7. vue css动画

    .toggle-cart-enter-active, .toggle-cart-leave-active { transition: all .3s ease-out; } .toggle-cart- ...

  8. CSS动画小结

    CSS动画 原理:1.画面之间变化  2.视觉暂留作用 常见问题 1.CSS 动画的实现方式有几种 1.transition  2. keyframes(animation) 2.过渡动画和关键帧动画 ...

  9. vue 动画原理 part1

    Vue动画原理 增加和删除css增加样式实现一个过渡效果也就是动画效果 1.需要动画效果的标签外包裹一个transition标签 会被自动分析css样式,然后自动构建一个动画流程 transition ...

随机推荐

  1. Matplotlib_key_point

    Matplotlib官方入门教程: http://www.labri.fr/perso/nrougier/teaching/matplotlib/ 本文参考教程: http://codingpy.co ...

  2. mongodb重置密码

    1.删除服务,重新创建没有验证的服务 2.关闭服务后修改conf文件auth=false或者 3.重新开启服务后然后进入mongo 查看是否存在用户 use admin db.system.users ...

  3. hdu4857 拓扑排序

    题目大意: 糟糕的事情发生啦,现在大家都忙着逃命.但是逃命的通道很窄,大家只能排成一行. 现在有n个人,从1标号到n.同时有一些奇怪的约束条件,每个都形如:a必须在b之前. 同时,社会是不平等的,这些 ...

  4. pip飞起来了

    这里说下Windows下的修改方法,看了网上很多的教程发现都不行,尝试了好久终于发现了可行的方法. 找到python安装目录下的:\Lib\site-packages\pip\models\index ...

  5. JavaSE---多线程---概述

    1.概述 1.1 进程: 系统进行资源分配.调度的一个独立单元: 进程的特征: 1.1.1 独立性: 系统中独立存在的实体,拥有自己独立的资源: 每个进程都拥有自己私有的地址空间,在没有经过进程本身允 ...

  6. python--表达式形式的yield、面向过程编程、内置函数

    yield的表达式形式 def init(func): def wrapper(*args, **kwargs): g = func(*args, **kwargs) next(g) return g ...

  7. linux IPC 消息队列（二）

    我在网上想找多进程之间的通信方式,发现有人写的消息队列很好,搬过来: common.h #ifndef __COMMON_H_ #define __COMMON_H_ #include <std ...

  8. Tomcat负载均衡图片显示不正常解决方法

    在部署一个Tomcat玩玩的时候,发现在做nginx负载均衡时,网站显示不正常,图片会变得很大.测试了半天都没成功,最后查找资料,才发现Tomcat负载均衡时Session处理有问题,Session是 ...

  9. Mysql学习-安装与启动

    安装mysqlrpm -ivh Mysql-server....rpm安装完成后,会提示/usr/bin/mysqladmin -u root password 'new-password'也可以用m ...

  10. jquery实现回车键登录/搜索等确认功能

    button按钮提交方式: $('#search').click(function() { get_table(); }); //keyCode=13是回车键,设置回车键提交 $("body ...