<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css动画原理</title>

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

    <!--官网：https://cn.vuejs.org/v2/guide/transitions.html#CSS-%E5%8A%A8%E7%94%BB-->

    <style>

        .fade-enter,  /*进入过渡的开始状态*/

        .fade-leave-to{  /*离开过渡的结束状态*/

            opacity: 0;

        }

        .fade-enter-active, /*进入过渡生效时的状态*/

        .fade-leave-active{ /*离开过渡生效时的状态*/

            transition: opacity .5s;

        }

        .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>

</head>

<body>

<div id="app">

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

    <transition name="fade">

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

    </transition>

    <hr>

    <transition name="slide-fade">

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

    </transition>

</div>

<script>

    vm = new Vue({

        el: '#app',

        data: {

            show:true

        },

        methods:{

            btnClick:function () {

               this.show = !this.show

            }

        }

    })

</script>

</body>

</html>

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

  1. vue中css动画原理

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

  2. vue css动画原理

    从隐藏到显现 从显现到隐藏 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  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 中的动画特效

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

  8. CSS动画小结

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

  9. vue 动画原理 part1

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

随机推荐

  1. 二十二：视图之add_url_rule和app.route

    flask注册视图有两种方式 一:add_url_rule()add_url_rule源码:rule:接口地址view_func=视图函数endpoint=终结点,可以理解为给当前视图取的别名,最直观 ...

  2. linux:vi替换命令

    linux:vi替换命令 vi/vim 中可以使用 :s 命令来替换字符串.以前只会使用一种格式来全文替换,今天发现该命令有很多种写法(vi 真是强大啊,还有很多需要学习),记录几种在此,方便以后查询 ...

  3. git 合并远程分支

    假设远程分支 dev-by-wbw  本地分支dev-by-wgg 在本地新建一个与远程的分支dev-by-wbw相同(被合并的版本)的分支dev-by-wbw git checkout - b or ...

  4. body标签中的相关标签

    一.内容概要 字体标签 h1~h6 <font> <u> <b> <strong> <em> <sup> <sub> ...

  5. python 并发编程 多线程 线程理论

    操作系统比作一家公司,进程相当于一个部门  线程相当于一个部门的成员 进程之间是互相隔离的 一 什么是线程 1. 每启动一个进程 至少有一个线程,  在传统操作系统中,每个进程有一个地址空间,而且默认 ...

  6. C语言I博客作业12-学期总结

    一.我学到的内容 二.我的收获 1. https://www.cnblogs.com/1076022899-lj/p/11576442.html 收获:第一次接触到C语言和PTA,第一次学习了博客园和 ...

  7. Axios 的基本使用

    Axios 是一个基于 promise 的HTTP 库, 可以用在浏览器和 node.js 中. 1. 从浏览器创建 XMLHttpRequests 2. 从node.js 创建 http 请求 3. ...

  8. algorithm下的常用函数

    algorithm下的常用函数 max(),min(),abs() max(x,y)返回x和y中最小的数字 min(x,y)返回x和y中最大的数字 abs(x)返回x的绝对值,注意x应当是整数,如果是 ...

  9. Linux 释放占用端口

    在使用 Swoole 扩展库的 WebSocket 服务时,直接退出终端,但是 WebSocket 使用的端口依然坚挺的在被占用着. 导致再次启动 WebSocket 服务失败. 具体操作: 1.ne ...

  10. 剑指offer 剪绳子

    题目描述 给你一根长度为n的绳子,请把绳子剪成m段(m.n都是整数,n>1并且m>1),每段绳子的长度记为k[0],k[1],...,k[m].请问k[0]xk[1]x...xk[m]可能 ...