<!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. 通过wscript运行的JS脚本，如何引入另一个JS文件

    链接: https://helloacm.com/include-external-files-in-vbscriptjscript-wsh/ 代码示例: function Include(jsFil ...

  2. sha256---利用java自带的实现加密

    利用java自带的实现加密:参考https://jingyan.baidu.com/article/2fb0ba40a2ef2b00f3ec5f74.html /** * 利用java原生的摘要实现S ...

  3. kendo Ui实现搜索选中建议 不改变输入框的值

    $("#SubjectFilter").kendoAutoComplete({ dataTextField: "patientCardNumber", temp ...

  4. 【VS开发】【图像处理】RGB Bayer Color分析

    RGB Bayer Color分析 Bayer色彩滤波阵列 拜耳色彩滤波阵列(Bayer Color Filter Array,CFA)是非常有名的彩色图片的数字采集格式.色彩滤波器的模式如上图所示, ...

  5. shell脚本一键部署nginx

    一键部署nginx 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 ...

  6. 修改python pip3镜像源

    方法一: pip3 install 包名  -i 镜像源url 主要的镜像源: pip3 install tornado -i https://pypi.douban.com/simple/  pip ...

  7. CentOS添加使用

    在本机安装虚拟机,虚拟机安装CentSO.也可以装双系统,双系统问题更多 环境:win7 64 位 1.查看电脑是否可虚拟化(在百度查) 2.查看电脑是否打开虚拟机设置,如果没有,百度如何开启 打开虚 ...

  8. trigraph

    trigraph是c/c++对之前键盘无法输入一些符号而做出的补充设计,将以下字符用其他三个字符来代替 # ??= \ ??/ ^ ??' [ ??( ] ??) { ??< } ??> ...

  9. poj 1061 青蛙的约会+拓展欧几里得+题解

    青蛙的约会+拓展欧几里得+题解 纵有疾风起 题意 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它们出 ...

  10. 360度3D 旋转插件

    Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件.Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动.鼠标滚轮和移动触摸来进行图片逐帧旋转的效果.比 ...