http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 4536|回复: 4
打印 上一主题 下一主题

[vue.js学习笔记] [Vue.js]学习笔记-Vue.js过渡-css过渡

[复制链接]
跳转到指定楼层
楼主
发表于 2019-1-6 22:08:03 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
[Vue.js]学习笔记-Vue.js过渡-css过渡




导读部分





教程部分


Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
另: Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统

Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。

Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件。

过渡的语法格式:

[HTML] 纯文本查看 复制代码
<transition name = "fade">
    <p v-show = "show" v-bind:style = "styleobj">动画实例</p>
</transition>


上个内容我们主要学习了过渡的语法,以及简单的用法, 本次我们学习css过渡。


在我们平时的开发中, 通常我们都是使用储css过渡来实现效果
下面我门还是通过实例来学习下css过渡的用法,以及效果。

实例:

[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></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
/* .slide-fade-leave-active 用于 2.1.8 以下版本 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>
</head>
<body>
<div id = "databinding">
<button v-on:click = "show = !show">点我</button>
<transition name="slide-fade">
    <p v-if="show">苏飞论坛</p>
</transition>
</div>
<script type = "text/javascript">
new Vue({
    el: '#databinding',
    data: {
        show: true
    }
})
</script>
</body>
</html>

运行结果:


点击点我按钮后, 可以看到, ‘苏飞论坛’字样隐藏, 并增加了淡入淡出的效果。



1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
沙发
发表于 2019-1-7 08:38:04 | 只看该作者
强烈支持楼主ing……
板凳
发表于 2019-1-7 08:38:05 | 只看该作者
我只是路过打酱油的。
地板
发表于 2019-1-7 14:40:44 | 只看该作者
我只是路过打酱油的。
5
发表于 2019-1-8 17:08:40 | 只看该作者
强烈支持楼主ing……
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-11-8 05:34

© 2014-2021

快速回复 返回顶部 返回列表