精华内容
下载资源
问答
  • transition 过渡效果

    2019-03-07 17:03:08
    过渡效果 只针对特定的数值有效,针对某些属性值(block),是无效的。 过渡: 可以在不适用flash动画或JavaScript的情况下,当元素从1中样式变化成另一种样式时,为元素添加效果。要实现这一点,必须规定两项内容...

    过渡效果 只针对特定的数值有效,针对某些属性值(block),是无效的。

    过渡:
    可以在不适用flash动画或JavaScript的情况下,当元素从1中样式变化成另一种样式时,为元素添加效果。要实现这一点,必须规定两项内容:
    1.规定希望把效果添加到那个css属性上,
    2.规定效果的时长。
    语法:transition:property |duration |timing-function |delay;
    property:规定设置过渡效果的css属性的名称。
    duration:规定设置过渡效果需要多少秒或毫秒。
    timing-function:规定速度效果的速度曲线。
    delay:定义过渡效果何时开始执行。

     

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>过渡01</title>
    		<style type="text/css">
    			* {
    				padding: 0;
    				margin: 0;
    			}
    			div {
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				position: absolute;
    				left: 10px;
    				top: 10px;
    				/* 添加过渡效果: 过渡效果执行完后,默认会回到原始状态。 */
    				/* 1.property 添加过渡效果的样式属性名称 */
    				/* transition-property: left; */
    				/* 2.过渡效果耗时 */
    				/* transition-duration: 2s;
    				transition-timing-function: ease-in;
    				transition-delay: 1s; */
    				/* 简写:transition:属性名  过渡时间  时间函数  延迟 */
    				/* transition: left 2s linear 2s; */
    				/* 为多个样式同时添加过渡效果 */
    				/* transition:left 2s linear 0s, background-color 2s linear 0s; */
    				
    				/* 为所有样式添加过渡效果
    				 1.所有样式的过渡效果一样
    				 2.效率低下,它会去查询所有添加的样式,
    				 建议不要这么写。使用上面多个样式同时添加效果的样式处理。
    				 3.stpe(4):可以让过渡效果分为指定的几步来完成, 但是很多浏览器不支持。
    				 */
    				transition: all 2s steps(4);
    				/* 兼容适配不同的浏览器 */
    				-moz-transition:  all 2s steps(4);
    				-webkit-transition:  all 2s steps(4);
    				-moz-transition:  all 2s steps(4);
    			}
    			/* 单击事件, 需要一直按着div */
    			div:active {
    				left: 1000px;
    				background-color: #008000
    			}
    		</style>
    	</head>
    	<body>
    		<div></div>
    	</body>
    </html>

    ========================

    手风琴下拉菜单效果

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>手风琴下拉菜单效果</title>
    		<style type="text/css">
    			* {
    				padding: 0;
    				margin: 0;
    			}
    
    			.menu {
    				width: 200px;
    				height: auto;
    				margin: 100px auto;
    			}
    
    			.item {
    				width: 100%;
    				height: auto;
    			}
    
    			.item>h3 {
    				height: 40px;
    				line-height: 40px;
    				background-color: #7dffe7;
    				color: orange;
    				padding-left: 10px;
    				border-bottom: 2px solid #CCCCCC;
    			}
    
    			.item>.itemBox {
    				width: 100%;
    				height: 0px;
    				/* 默认隐藏数据*/
    				overflow: hidden;
    				/* display: none; */
    				/* 添加过渡效果:过渡效果智能产生从某个具体值,到另外一个具体的值的过渡 
    				无法为一些状态值添加过渡效果,只能给具体的值 添加过渡效果。*/
    				/* 1 为那些设置css样式添加过渡效果, 2 耗时 */
    				transition-property: height;
    				transition-duration: 1s;
    			}
    
    			.item>.itemBox>ul {
    				list-style: none;
    				background-color: #eaffb6;
    				padding: 15px;
    				margin: 0;
    			}
    
    			/* h3:hover >.itemBox{} */
    			/* 为item添加hover伪类 */
    			.item:hover>.itemBox {
    				/* display: block; */
    				/* 显示子菜单*/
    				height: 110px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="menu">
    			<div class="item">
    				<h3>国内新闻</h3>
    				<div class="itemBox">
    					<ul>
    						<li>深圳好地方</li>
    						<li>深圳房价高</li>
    						<li>深圳有华为</li>
    						<li>深圳ZTE总部在那边</li>
    					</ul>
    				</div>
    			</div>
    			<div class="item">
    				<h3>国际新闻</h3>
    				<div class="itemBox">
    					<ul>
    						<li>金三胖坐绿皮</li>
    						<li>特朗普狗似的</li>
    						<li>打倒小日本</li>
    						<li>国际新闻3</li>
    					</ul>
    				</div>
    			</div>
    
    			<div class="item">
    				<h3>体育新闻</h3>
    				<div class="itemBox">
    					<ul>
    						<li>宁泽涛退役了。</li>
    						<li>姚明砍下40分</li>
    						<li>阿联坐火车</li>
    						<li>C罗不踢球</li>
    					</ul>
    				</div>
    			</div>
    
    			<div class="item">
    				<h3>娱乐新闻</h3>
    				<div class="itemBox">
    					<ul>
    						<li>杨幂看小孩</li>
    						<li>周杰伦唱歌</li>
    						<li>沙发</li>
    						<li>发电房</li>
    					</ul>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    

     

    展开全文
  • transition过渡效果

    2016-02-26 10:05:00
    transition-property 规定设置过渡效果的 CSS 属性的名称。transition-duration 规定完成过渡效果需要多少秒或毫秒。transition-timing-function 规定速度效果的速度曲线。transition-delay 定义过渡效果何时开始...

    语法:transition: property duration timing-function delay;

    transition-property 规定设置过渡效果的 CSS 属性的名称。
    transition-duration 规定完成过渡效果需要多少秒或毫秒。
    transition-timing-function 规定速度效果的速度曲线。
    transition-delay 定义过渡效果何时开始。


    正常和 .hover伪事件使用,从而达到过渡效果

    转载于:https://www.cnblogs.com/GerryOfZhong/p/5219425.html

    展开全文
  • Html transition过渡效果

    2020-11-17 20:32:59
    记录事件: HTML transition过渡效果 问题描述: 1.transition用来给标签设置过渡效果,第一个值:设置对那个样式进行过渡,第二个值设置过渡时间 2. 强调:transition过渡需要一个触发机制(比如悬停,点击等)才会执行...

    记录问题:

    记录事件: HTML transition过渡效果

    问题描述:

    1.transition用来给标签设置过渡效果,第一个值:设置对那个样式进行过渡,第二个值设置过渡时间 2. 强调:transition过渡需要一个触发机制(比如悬停,点击等)才会执行 3.transition不能等到触发的时候才添加,需要一开始就设置好

    代码块:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                /* transition用来给标签设置过渡效果,第一个值:设置对那个样式进行过渡,第二个值设置过渡时间 */
                /* 强调:transition过渡需要一个触发机制(比如悬停,点击等)才会执行
                2.transition不能等到触发的时候才添加,需要一开始就设置好 */
    
                
                transition: all 3s;
    
            }
            div:hover{
                width: 300px;
                height: 300px;
                /* 边框,第一个值:边框的宽度,第二个值,边框的样式;(solid 单实现,double 双实线,dotted 点虚线);
                第三个值.边框的颜色 */
                border: 5px solid blue;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>
    
    展开全文
  • vue transition过渡效果

    2021-01-07 16:42:05
    Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡:(下列条件如果有变化就会产生transition过渡效果) 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 ...

    官网参考:https://animate.style/
    Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡:(下列条件如果有变化就会产生transition过渡效果)

    • 条件渲染 (使用 v-if)
    • 条件展示 (使用 v-show)
    • 动态组件
    • 组件根节点

    vue官方动画网址:
    https://animate.style/
    调用地址:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    

    <transition-group>

    如果我们要同时渲染多个列表,如:我们使用v-for列表过渡时使用 <transition-group>组件进行过渡。
    特点:

    • 不同于 <transition>,它会以一个真实元素呈现:默认为一个 。你也可以通过 tag attribute 更换为其他元素。如:<transition-group name="div"></transitiong-group>
    • 过渡模式不可用,因为我们不再相互切换特有的元素。
    • 内部元素总是需要提供唯一的 key attribute 值。
    • CSS 过渡的类将会应用在内部的元素中,而不是这个组/容器本身。

    vue实现原理
    当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理:

    自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名。

    如果过渡组件提供了 JavaScript 钩子函数,这些钩子函数将在恰当的时机被调用。

    如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作 (插入/删除) 在下一帧中立即执行。(注意:此指浏览器逐帧动画机制,和 Vue 的 nextTick 概念不同)

    过渡的类名:
    在进入/离开的过渡中,会有 6 个 class 切换。

    v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。

    v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。

    v-enter-to:2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。

    v-leave:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。

    v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。

    v-leave-to:2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

    样式设置:

    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0;
    }
    

    在这里插入图片描述
    示例:
    对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 ,则 v- 是这些类名的默认前缀。如果你使用了 ,那么 v-enter 会替换为 my-transition-enter。

    v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线,在下面章节会有个示例说明。

    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .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 for below version 2.1.8 */ {
      transform: translateX(10px);
      opacity: 0;
    }
    
    展开全文
  • transition过渡效果失效问题 transition不能和display:none合用,合用的时候可能出现打开控制台过渡效果偶尔生效,控制台关闭后过渡效果不生效问题,想要实现元素出现后进行过渡效果可以使用visibility属性将元素...
  • Vue中transition过渡效果

    千次阅读 2019-09-16 13:30:12
    一,进入/离开过渡效果 二,过渡效果的钩子函数 三,过渡效果+Animate.css 四,列表过渡 一,进入/离开过渡效果 进入/离开过渡效果:Vue在插入、更新或移除DOM时,可以设置一些动画效果; 如何使用过渡效果...
  • css-transition过渡效果

    2020-04-28 21:44:38
    过渡效果 - transition 1.什么是过渡 使得CSS的属性值在一段时间内平缓变化的一个效果。 2.语法 1.指定过渡属性 作用:指定那个属性值在变化的时候使用过渡 属性:transition-property 取值: 1.属性名称 2.all 但凡...
  • CSS3 如何让height:auto实现transition过渡效果
  • css3 transition过渡效果

    2019-02-22 17:09:03
    基本用法: transition: 样式名称, 过渡时间, 过渡方式, 延时; .circle{ transition: transform .2s ease .5s; } ...可选过渡效果: ... 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubi...
  • CSS3 transition 过渡效果

    2019-12-19 15:18:26
    transition: CSS属性,花费时间,效果曲线(默认ease),延迟时间(默认0) 三、例子 上面两个按钮,第一个没有使用过渡,第二个使用过渡,大家可以看到当中的区别,用了过渡之后是不是没有那么生硬,有一个变化的...
  • transition:width 0.5s easy-in 0s,height 0.3s easy 0s;} div:hover{ height:400px;weight:500px;} /*鼠标经过盒子,变换高度、宽度*/ width:元素的要过渡的属性 0.5s:花费时间 easy-in:加速 0s:何时...
  • vue的transition过渡效果

    2016-12-22 20:33:00
    需要4个类: *-enter: 进入的开始状态, *-enter-active: 进入的结束状态...vue-router应用过渡效果需要在<router-view>标签外面套一个<transition>, 效果和transition是一样的 转载于:https://www.c...
  • /* transition: 变化的属性 花费时间 运动曲线 何时开始; */ /* transition: width .5s ease 0s, height .5s ease 1s; */ /* 如果想要写多个属性,利用逗号进行分割 */ /* transition: width .5s, height .5s; */...
  • 先树下下过渡的CSS类名, 1、v-enter-active:可以理解为组件显示的整个过程。 2、v-enter:是组件显示的起始状态 3、v-enter-to:是组件最后展示的状态 4、v-leave-active:是组件隐藏的整个过程 5、v-leave:...
  • CSS透明半透明与transition过渡效果

    千次阅读 2018-10-31 21:35:49
    一、CSS透明与半透明 1、CSS3 整体透明 opacity : 1 ; 透明度 filter : alpha( opacity = 100 ); 老旧浏览器 IE8 - 2、CSS3 颜色透明 #RRGGBB rgb( 255, 255, 255) rgba( 255 , 255 , 255...二、transition 过渡(...
  • 昨天在使用vue写过渡效果的时候,比较笨,花了很长时间,希望能在随笔中记录下自己的学习和分析的过程。 首先我们需要弄明白vue2.0中过渡效果该如何使用: 1、我们可以给下列情况的元素和组件添加过...
  • transition过渡效果可以应用到html每个元素。用法是添加到每个元素的事件中,比如说hover,onmouseover,onclick事件等。 下面就给大家介绍下transition的简单用法: Document .animation{width: 200px;...
  • 支持 transition 的浏览器,兼容性图表: transition 是简写属性,可以一次同时写下面4个属性的值;...transition-duration 定义过渡效果花费的时间。 默认值: 0 transition-timing-function 规定过...
  • ![图片说明](https://img-ask.csdn.net/upload/201704/21/1492786680_844378.png) 这里不用timeout的话好像就没有过渡效果,请问下是为什么?

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,771
精华内容 1,108
关键字:

transition过渡效果