transition | 易学教程

Vue transition展开收起动画

阅读更多关于 Vue transition展开收起动画

transition的使用，想将动画应用到哪个元素上，像下面这样用<transition></transition>把元素包起来就好了 <transition name="normal-expand"> <div class="adding-item" v-show="true"> /**/ </div> </transition> normal-expand对应的CSS代码： .normal-expand-enter-active, .normal-expand-leave-active{ transition:all 1s ease; height: 368px !important; } .normal-expand-enter, .normal-expand-leave-to { height: 0px !important; } 但是我遇到一个问题，我这个adding-item是动态添加的，用户点击添加按钮就会添加一条，每一条有个移除按钮可以移掉。然后就发现刚添加进去的时候完全不播放，移除时倒是播的好好的（气死了）理论上这个当前元素一定要设置v-if或v-show，但是新添加的不也是从无到有吗。。只好试试万能的timeout大法了： <transition name="normal-expand"> <div class="sr-manage-relation

web基础(5): CSS3介绍

阅读更多关于 web基础(5): CSS3介绍

chapter5 CSS3 新性能（一）圆角边框与阴影 1.border-radius属性例1 border-top-left-radius:40px 20px ; 两个值分别表示水平方向、垂直方向，内部一个椭圆。如果只有一个值，就是一个圆。例2 注意这里的height为50px. border-radius 是25px, 四周都有一个25半径的圆，得到左右半圆的形状。进一步，如何做出一个圆形？width也为50px即可。 ----------- 补充 W3C 在制定标准的时候，新标准还没定下来，浏览器厂商为了快速加入新属性的支持，需要加前缀。等到W3C新标准确定后，全面支持，去掉前缀。注意：用上述属性需要加上浏览器的前缀。代码看起来会很繁琐。在sublime中，可以输入简写 bdrs，进行拓展可以生成标准的代码格式。 2. box-shadow属性该属性可以做盒子的阴影。例子 div{ width:300px; height:100px; background-color:#f90; box-shadow:10px 10px 5px #88; } 结果为（二）文字与文本 1. text-shadow text-shadow: 水平偏移垂直偏移阴影大小颜色 HTML内容为<h1>Web Design</h1> 如果阴影大小被省略，那么默认大小与文字一样。

ease in transition of submenu

阅读更多关于 ease in transition of submenu

问题 I am using twenty fourteen theme for my WordPress blog. It's a travel blog still in development... never mind the content though. Anyway, I have one sub-menu on the main menu. The site is: http://www.journeywithandrew.com/ so if you scroll over "WORLD HERITAGE SITES: REVIEWS & INFO" on the menu, you will see a sub-menu appear with two items: "map view" and "list view" My question is: I am using a css easing-in background effect on the main menu as you can see when you hover over the menu

css3新特性

阅读更多关于 css3新特性

css3新特性： 1.css3重要模块： 1.1选择器 1.2盒模型 1.3背景和边框 1.4文字特效 1.5 2D/3D转换 1.6动画 1.7多列布局 1.8用户界面 css3可继承的属性：字体：font，font-size，font-weight，font-family，font-style，font-variant，颜色：color。列表：list-style，list-style-type，list-style-position，list-style-image. 文字：letter-spacing，word-spacing，white-space，line-height，text-decoration，text-transform，text-indent，text-align。所有元素可继承：visibility和cursor。 2.css3边框 2.1 border-radius//圆角 <div>border-radius</div> div{ border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:30px; border-radius:25px; -webkit-border-radius:25px; -ms-border-radius:25px; -o-border

css3新特性

阅读更多关于 css3新特性

1.前言 css3这个相信大家不陌生了，是个非常有趣，神奇的东西！有了css3，js都可以少写很多！我之前也写过关于css3的文章，也封装过css3的一些小动画。个人觉得css3不难，但是很难用得好，用得顺手，最近我也在过一遍css3的一些新特性（不是全部，是我在工作上常用的，或者觉得有用的），以及一些实例，就写了这一篇总结！希望，这篇文章能帮到大家认识css3。写这篇文章主要是让大家能了解css3的一些新特性，以及基础的用法，感觉css3的魅力！如果想要用好css3，这个得靠大家继续努力学习，寻找一些讲得更深入的文章或者书籍了！如果大家有什么其他特性推荐的，欢迎补充！大家一起学习，进步！看这篇文章，代码可以不用看得过于仔细！这里主要是想让大家了解css3的新特性！代码也是很基础的用法。我给出代码主要是让大家在浏览器运行一下，让大家参考和调试。不要只看代码，只看代码的话，不会知道哪个代码有什么作用的，建议边看效果边看代码。 2.过渡过渡，是我在项目里面用得最多的一个特性了！也相信是很多人用得最多的一个例子！我平常使用就是想让一些交互效果（主要是hover动画），变得生动一些，不会显得那么生硬！好了，下面进入正文！引用菜鸟教程的说法：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。 2-1语法

Background-size transition not work in Chrome

阅读更多关于 Background-size transition not work in Chrome

问题 I'm trying to transition background-size and background-color . Chrome : Transition of background-size not working Firefox : Both are working fine I have also created a fiddle. .highlight { display: block; position: relative; /*min-height: 800px;*/ min-height: 200px; background-position: center center; background-repeat: no-repeat; /*padding-top: 200px;*/ padding-top: 80px; /*background-size: cover;*/ } .highlight:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%;

Background-size transition not work in Chrome

阅读更多关于 Background-size transition not work in Chrome

React loses CSS transition if element ordering changes

阅读更多关于 React loses CSS transition if element ordering changes

问题 React keys are not working. If I swap the position of two react elements ( item0 and item1 ) positioned with transform transform: translate(); a css transition is triggered, only if the elements were rendered in the same order. If I change the order of the render (position swap still the same but now item0 renders after item1), the css transition is not triggered . It looks like react is deleting the DOM element and recreating it, even if they have React keys set . Here is a simple JSfiddle

css3实现转轴展开照片列表

阅读更多关于 css3实现转轴展开照片列表

* { margin : 0 ; padding : 0 ; } ul { list - style : none ; } . wrap { width : 100 vw ; height : 100 vh ; background - color : black ; display : flex ; /* x轴居中 */ justify - content : center ; /* y居中 */ align - items : center ; } . wrap ul { width : 80 % ; height : 80 % ; /* background-color: white; */ /* border: 1px solid white; */ /* 弹性盒模型 */ display : flex ; /* 两端对齐 */ justify - content : space - between ; align - items : center ; } . wrap li { width : 16 % ; height : 100 % ; background : # 333 ; border - radius : 20 px ; overflow : hidden ; transition : width 0.5 s linear , height 0.5 s

过渡transition

阅读更多关于过渡transition

作为一个直男我是极其不愿意写过渡效果，况且支持过渡的浏览器版本都比较高。奈何扛不住金钱的诱惑… transition属性如下： transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始。简写方式：transition: property duration timing-function delay; 下面写了一个小栗子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width: 400px; height: 300px; margin: auto; position: relative; overflow: hidden; } .box-top{

订阅 transition