<!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. Flex TabNavigator

    1.获取子项个数 TabNavigator.numChildren(int) 2.对于静态的TabNavigator的如何处理权限显示 for(var i:int=0;i <tab.numChi ...

  2. RTX修改标题logo方法

    摘要: 打开“腾讯通RTX管理器”→“配置向导”→“服务运行状态”→“停止所有服务”,退出“腾讯通RTX管理器”按照如下操作.①修改到期时间为:9999-12-300:0:0 用记事本打开“C:/Pr ...

  3. 盒模型 box-sizing 属性

    css3增添了盒模型box-sizing属性,box-sizing属性值可以有下面三个值: content-box:默认值,让元素维持W3C的标准盒模型.元素的宽度/高度(width/height)( ...

  4. Metinfo4.0 /member/save.php 任意用户密码修改

  5. 【神经网络与深度学习】卷积神经网络-进化史：从LeNet到AlexNet

    [卷积神经网络-进化史]从LeNet到AlexNet 本博客是[卷积神经网络-进化史]的第一部分<从LeNet到AlexNet> 如需转载,请附上本文链接:http://blog.csdn ...

  6. 关于add migration 报错的问题解决方案

    The current CSharpHelper cannot scaffold literals of type 'Microsoft.EntityFrameworkCore.Metadata.In ...

  7. Webstorm 2019激活码(有效期至2020年6月5日)

    Webstorm 2019激活码(有效期至2020年6月5日):https://blog.csdn.net/lt326030434/article/details/90229298

  8. 20 亿的 URL 集合，如何快速判断其中一个？

    假设遇到这样一个问题:一个网站有 20 亿 url 存在一个黑名单中,这个黑名单要怎么存?若此时随便输入一个 url,你如何快速判断该 url 是否在这个黑名单中?并且需在给定内存空间(比如:500M ...

  9. setter 和 getter 高级 以及内存管理初级

    setter 和 getter 的演变,紧接setter 和 getter 初级 1.@property 和  @synthesize 这两个关键字的出现,就是为了剔除代码中的setter方法和get ...

  10. 不要64 数位DP

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