从隐藏到显现

从显现到隐藏

 <!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. linux 出现 -bash-4.2# 问题的解决方法

    1.在根目录创建 /root 目录 mkdir /root 2. 复制 .bashrc  以及 .bash_profile俩个文件到root目录下 cp /etc/skel/.bashrc /root ...

  2. egg 的学习

    1.初始化项目 快速生成项目: $ npm i egg-init -g $ egg-init egg-example --type=simple $ cd egg-example $ npm i 启动 ...

  3. 字符串操作——C语言实现

    代码如下: #include <stdio.h> #include <stdlib.h> #include <string.h> #include <asse ...

  4. Spark核心原理初探

    一.运行架构概览 Spark架构是主从模型,分为两层,一层管理集群资源,另一层管理具体的作业,两层是解耦的.第一层可以使用yarn等实现. Master是管理者进程,Worker是被管理者进程,每个W ...

  5. Spring Boot和Spring Cloud学习资源推荐

    Spring Boot和Spring Cloud学习资源推荐   比较好的学习资源,分享一下. 1.Spring Boot官方文档:http://projects.spring.io/spring-b ...

  6. hdu 1402 A * B Problem Plus （FFT模板）

    A * B Problem Plus Problem Description Calculate A * B. Input Each line will contain two integers A ...

  7. hdu 2089 不要62 （数位dp）

    Description 杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer). 杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来,就可以消除个别 ...

  8. Python每日一题 009

    题目 有个目录,里面是你自己写过的程序,统计一下你写过多少行代码.包括空行和注释,但是要分别列出来. 代码 参照网络上代码 # coding: utf-8 import os import re # ...

  9. python find()函数

    实例(Python 2.0+)  str1 = "this is string example....wow!!!"; str2 = "exam"; print ...

  10. Openstack组件部署 — 将一个自定义 Service 添加到 Keystone

    目录 目录 Keystone 认证流程 让 Keystone 为一个新的项目 Service 提供验证功能 最后 Keystone 认证流程 User 使用凭证(username/password) ...