从隐藏到显现

从显现到隐藏

 <!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. HBase性能优化方法总结（三）：读表操作（转）

    转自:http://www.cnblogs.com/panfeng412/archive/2012/03/08/hbase-performance-tuning-section3.html 本文主要是 ...

  2. webpack 学习三 模式

    开发环境(development)和生产环境(production)的构建目标差异很大.在开发环境中,我们需要具有强大的.具有实时重新加载(live reloading)或热模块替换(hot modu ...

  3. Fiji-imageJ 无法打开

    可能的原因是文件的路径包含中文名称.

  4. 适配器模式Adapter

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11401410.html 1. 定义将一个类的接口转换成客户希望的另外一个接口.适配器模式使得原本由于接 ...

  5. SEM推广引流效果的因素有哪些呢？

    决定搜索引擎推广效果的基本就是流量,所引流过来的是有效流量还是无效流量,直接决定了推广的效果!那我们如何才能引流到最精准的流量把流量变现呢? 第一个就是关键词的匹配模式 "民营企业" ...

  6. linux文件查找工具——locate,find

    一文件查找介绍 文件的查找就是在文件系统上查找符合条件的文件. 文件查找的方式:locate, find非实时查找也就是基于数据库查找的locate,效率特别高. 实时查找:find 二locate ...

  7. 【Flutter学习】组件学习之目录

    01. Flutter组件-Layout-Container-容器  02. Flutter组件-Text-Text-文本  03. Flutter组件-Text-RichText-富文本  04. ...

  8. Python每日一题 003

    将 002 题生成的 200 个激活码(或者优惠券)保存到 MySQL 关系型数据库中. 代码 import pymysql import uuid def get_id(): for i in ra ...

  9. Fidder的使用

    默认的header是类似这样的 User-Agent: Fiddler Host: localhost Content-Length: 34 只需要改成这样的 User-Agent: Fiddler ...

  10. MyBatis简介与配置

    1.1MyBatis简介 MyBatis 是一个可以自定义SQL.存储过程和高级映射的持久层框架.MyBatis 摒除了大部分的JDBC代码.手工设置参数和结果集重获.MyBatis 只使用简单的XM ...