<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8"/>

        <script src="vue.js"></script>

    </head>

    <body>

        <div>

        <h1>--CSS过渡--</h1>

        <div id="example1">

            <button @click="show = !show">Toggle render</button>

            <transition name="slide-fade">

                <p v-if="show">hello</p>

            </transition>

        </div>

        <script>

        // Vue 根实例

        var example1 = new Vue({

            el: '#example1',

            data: {

                show: true

            }

        })

        </script>

        <style>

            .slide-fade-enter-active {

                transition: all .3s ease;

            }

            .slide-fade-leave-active {

                transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);

            }

            .slide-fade-enter, .slide-fade-leave-to {

                transform: translateX(10px);

                opacity: 0;

            }

        </style>

        </div>

        <div>

        <h1>--CSS动画--</h1>

        <div id="example2">

            <button @click="show = !show">Toggle show</button>

            <transition name="bounce">

                <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>

            </transition>

        </div>

        <script>

        // Vue 根实例

        var example2 = new Vue({

            el: '#example2',

            data: {

                show: true

            }

        })

        </script>

        <style>

            .bounce-enter-active {

                animation: bounce-in .5s;

            }

            .bounce-leave-active {

                animation: bounce-in .5s reverse;

            }

            @keyframes bounce-in {

                0% {

                    transform: scale(0);

                }

                50% {

                    transform:scale(1.5);

                }

                100% {

                    transform:scale(1);

                }

            }

        </style>

        </div>

    </body>

</html>

运行效果图：

CSS过渡、CSS动画的更多相关文章

  1. Vue——关于css过渡和动画那些事

    1. 单元素/组件的过渡transition Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v ...

  2. CSS过渡、动画及变形的基本属性与运用

    [逆战班] 动画可以让一个元素具有动态的效果,这个过程是使元素从一种样式变成另一个样式的过程.我们可以通过设置关键帧的方法来控制动画在某个时间节点的运动方式.通常设置多个节点来实现复杂的动画效果.0% ...

  3. 过渡与动画 - steps调速函数&CSS值与单位之ch

    写在前面 上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果. 但是如果我们想要实现逐帧动画,基于贝塞尔曲线的调速函数就显得有些无能为力了,因为我们并不需要帧与帧之间的过 ...

  4. Vue过渡效果之CSS过渡

    前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...

  5. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  6. How Javascript works (Javascript工作原理) (十三) CSS 和 JS 动画底层原理及如何优化其性能

    个人总结:读完这篇文章需要20分钟. 这是 JavaScript 工作原理的第十三章. 概述 正如你所知,动画在创建令人叹服的网络应用中扮演着一个关键角色.由于用户越来越注重用户体验,商户开始意识到完 ...

  7. JavaScript 工作原理之十三－CSS 和 JS 动画底层原理及如何优化其性能

    原文请查阅这里,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十三章. 概述 正如你 ...

  8. 过渡与动画 - 逐帧动画&steps调速函数

    写在前面 上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果. 但是如果我们想要实现逐帧动画,基于贝塞尔曲线的调速函数就显得有些无能为力了,因为我们并不需要帧与帧之间的过 ...

  9. Vue过渡与动画

    通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡 ...

  10. 【CSS】过渡、动画和变换

    1. 使用过渡 过渡效果一般是由浏览器直接改变元素的CSS属性实现的.例如,如果使用:hover选择器,一旦用户将鼠标悬停在元素之上,浏览器就会应用跟选择器关联的属性. <!DOCTYPE ht ...

随机推荐

  1. fatal: unable to access 'https://github.com/xxxxx/xxxx.git/': Failed to connect to github.com port 443: Timed out

    今天使用git push的时候提示"fatal: unable to access 'https://github.com/xxxxx/xxxx.git/': Failed to conne ...

  2. 【C/C++】【输入】关于scanf：输入空格，多次使用

    一.C/C++中带空格字符串的输入 C++中的cin和C中的scanf都是遇到空格或回车结束. 如果要让scanf接收空格,可以用读入字符集合的方式.%[] char a[100]; scanf(&q ...

  3. 【JavaWeb】【JSP】JSP传值到Servlet后端为NULL的问题

    JSP传值到Servlet后端为NULL的问题 哔哩哔哩@萌狼蓝天 博客:萌狼工作室-博客园 联系QQ:#3447902411# | 仅限技术交流可添加 | 添加请说明你的方向和来意 1.目标文件路径 ...

  4. Nginx编译添加新模块

    目录 一.简介与思路 一.简介与思路 当前适用于nginx已经在安装过了,如果没安装过,直接在编译时候添加模块即可. Nginx主要程序就是nginx这个二进制脚本,只要在编译一个nginx脚本替换掉 ...

  5. ES6解构赋值的简单使用

    相较于常规的赋值方式,解构赋值最主要的是'解构'两个字,在赋值的过程中要清晰的知道等号右边的结构. 先简单地看一下原来的赋值方式. var a=[1,2] 分析一下这句代码的几个点: (1)变量申明和 ...

  6. Mybatis环境搭建及测试

    1.新建java project,导入相应jar包 本次使用到的mybatis-3.2.7版本 mybatis需要jar包:mybatis-3.2.7.jar.lib文件下的依赖jar mysql驱动 ...

  7. jdk1.8安装教程

    JDK1.8安装包下载 链接:https://pan.baidu.com/s/18pEMo3gYsAAHWC9DjizP1A 提取码:xu99 1.双击JDK1.8的安装包,并点击下一步 2.选择安装 ...

  8. Docker 快速删除无用（none）镜像

    Dockerfile 代码更新频繁,自然docker build构建同名镜像也频繁的很,产生了众多名为none的无用镜像. 分别执行以下三行可清除 docker ps -a | grep " ...

  9. SpringCloud微服务实战——搭建企业级开发框架（三十四）：SpringCloud + Docker + k8s实现微服务集群打包部署-Maven打包配置

      SpringCloud微服务包含多个SpringBoot可运行的应用程序,在单应用程序下,版本发布时的打包部署还相对简单,当有多个应用程序的微服务发布部署时,原先的单应用程序部署方式就会显得复杂且 ...

  10. 『学了就忘』Linux系统定时任务 — 87、只执行一次的定时任务

    目录 1.at服务管理 2.at命令的访问控制 3.at命令 4.其他at管理命令 5.总结 定时任务是在服务器上常用到的一个工作. 在你指定的时间,系统会自动执行你指定的程序(脚本或者命令). Li ...