vue2.0 transition 多个元素嵌套使用过渡
在做vue的demo的时候遇到一个问题,多个嵌套的元素如何设置transition?
我的代码:代码中元素整体做平移,里面的inner中做旋转,实现一个圆形滚动的效果
<transition name="move">
<div class="cart-decrease" @click="decreaseCart" v-show="food.count>0">
<span class="inner icon-remove_circle_outline"></span>
</div>
</transition> 样式:
.cart-decrease{
display:inline-block;
padding:6px;
opacity:1;
transform:translate3D(0,0,0);
&.move-enter-active{
opacity:1;
transform:translate3D(0,0,0);
transition:all 0.4s linear;
}
&.move-enter{
opacity:0;
transform:translate3D(24px,0,0);
.inner{
transform: rotate(180deg)
}
}
&.move-leave{
opacity:1;
transform:translate3D(0,0,0);
}
&.move-leave-active {
opacity:0;
transform:translate3D(24px,0,0);
transition:all 0.4s linear;
.inner{
transform: rotate(180deg)
} }
.inner{
display:inline-block;
font-size:24px;
color:rgb(0,160,220);
line-height:24px;
transition:all 0.4s linear;
}
}
vue2.0 transition 多个元素嵌套使用过渡的更多相关文章
- vue2.0 transition -- demo实践填坑
前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡.在使用2.0版本做过渡效果 ...
- 【重点突破】—— Vue2.0 transition 动画Demo实践填坑
前言:vue1.0版本和2.0版本的过渡系统改变是很大的,具体请详看文档介绍.本文转载自郭锦荣的博客,一共列举了四种transition的使用实践,分别是css过渡.css动画.javascript钩 ...
- Vue2.0 Transition常见用法全解惑
Vue2.0的过渡系统(transition)有了很大的改变,想把1.0的项目迁移到2.0,着实需要费一些功夫,今天我就要把vue2.0的过渡系统的用法搞清楚,因为之前确实踩了不少坑.这里只涉及单元素 ...
- vue2.0 transition 手风琴
<div class="food"> <button @click="show=!show">show</button> & ...
- vue2.0中怎么获取元素
在元素上添加 v-el:food-wrapper (不用驼峰的写法) vue1版本 报错: vue2版本 (vue2把vue1中的 v-el 改为了 ref vue1 v-el:foods-wrapp ...
- vue2.0 transition用法
html: <div id="demo"> <button v-on:click="show = !show"> Toggle < ...
- vue1.0和vue2.0的区别(一)
今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...
- Vue2.0中的transition组件
组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
- vue2.0学习笔记之路由(二)路由嵌套+动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Material design之New Widgets(RecyclerView CardView)
New Widgets:提供了两个新的控件 RecyclerView CardView 这两个控件包含在了Android L的support library中, 他们可以用于显示复杂的布局而且都默认采 ...
- 第七篇:使用 fcntl 函数 获取,设置文件的状态标志
前言 当打开一个文件的时候,我们需要指定打开文件的模式( 只读,只写等 ).那么在程序中如何获取,修改这个文件的状态标志呢? 本文将告诉你如何用 fcntl函数 获取指定文件的状态标志. 解决思路 1 ...
- 面试题思考:IO 和 NIO的区别,NIO优点
面试时答: IO是面向流的,NIO是面向缓冲区的 Java IO面向流意味着每次从流中读一个或多个字节,直至读取所有字节,它们没有被缓存在任何地方: NIO则能前后移动流中的数据,因为是面向缓冲区的 ...
- "_dns_free_resource_record", referenced from:问题
本文转载至 http://blog.csdn.net/woaifen3344/article/details/41309471 _dns_free_resource_r_dns_free环信SDK集成 ...
- iOS捕获异常,常用的异常处理方法
本文转载至 http://www.cocoachina.com/ios/20141229/10787.html 前言:在开发APP时,我们通常都会需要捕获异常,防止应用程序突然的崩溃,防止给予用户不友 ...
- RadioButton ---- 样式效果切换
\res\drawable\radio_button_bg.xml <?xml version="1.0" encoding="utf-8"?> & ...
- Eclipse虚拟内存不足【Eclipse中虚拟内存设置】
Eclipse最近在做J2EE项目中 发现老是出现虚拟内存不足的提示 前2天去加了根内存 问题同样存在 为了让我在写代码时 不在出现那讨厌的内存不足的提示 也为了 不让那破机器再卡住 今天找到了解决方 ...
- Android 4.4 (KitKat) SMS Apis Change——Android 4.4的一个重大变化
Android团队通过Android开发博客透漏今年会放出Android 4.4 (KitKat) ,同时更新了 SMS 的部分API.博客上讲只有default SMS app才能对短信数据库有写权 ...
- POJ 1423 Greatest Common Increasing Subsequence【裸LCIS】
链接: http://acm.hdu.edu.cn/showproblem.php?pid=1423 http://acm.hust.edu.cn/vjudge/contest/view.action ...
- [PowerShell]–Checking the version of Office installed
– Create and initialize the object $objExcel = New-Object -ComObject Excel.Application – Query the v ...