草庐IT

【面试题】CSS transition 属性全面详解

mochenxiya 2023-03-28 原文

CSS transition 属性详解

点击打开视频讲解更详细

定义和用法

transition 属性是一个简写属性,用于设置四个过渡属性:

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

默认值: all 0 ease 0

注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。

transition-property 属性

定义和用法

transition-property 属性规定应用过渡效果的 CSS 属性的名称。(当指定的 CSS 属性改变时,过渡效果将开始)。

语法:transition-property: none|all|property;

默认值: all

描述
none 没有属性会获得过渡效果。
all 所有属性都将获得过渡效果。
property 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。

案例:

<template>
  <div id="app">
    <div class="demo"></div>
    <p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      
    } 
  },
  mounted() {
    
  },
  methods:{
    
  }
}
</script>

<style scoped>
.demo{
  width:100px;
  height:100px;
  background:blue;
  transition-property: width;
  transition-duration: 2s;
}

.demo:hover{
  width:300px;
}
</style>

transition-duration 属性

定义和用法

transition-duration 属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。

语法:transition-duration: time;

默认值: 0

描述
time 规定完成过渡效果需要花费的时间(以秒或毫秒计)。默认值是 0,意味着不会有效果。

案例:

<template>
  <div id="app">
    <div class="demo"></div>
    <p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      
    } 
  },
  mounted() {
    
  },
  methods:{
    
  }
}
</script>

<style scoped>
.demo{
  width:100px;
  height:100px;
  background:blue;
  transition-property: width;
  transition-duration: 5s;
}

.demo:hover{
  width:300px;
}
</style>

transition-timing-function 属性

定义和用法

transition-timing-function 属性规定过渡效果的速度曲线。

该属性允许过渡效果随着时间来改变其速度。

语法:transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

默认值: ease

描述
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

案例:

<template>
  <div id="app">
    <div class="demo"></div>
    <p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      
    } 
  },
  mounted() {
    
  },
  methods:{
    
  }
}
</script>

<style scoped>
.demo{
  width:100px;
  height:100px;
  background:blue;
  transition:width 5s;
  transition-timing-function:linear;
}

.demo:hover{
  width:300px;
}
</style>

transition-delay 属性

定义和用法

transition-delay 属性规定过渡效果何时开始。

transition-delay 值以秒或毫秒计。

语法:transition-delay: time;

默认值: 0

描述
time 规定在过渡效果开始之前需要等待的时间,以秒或毫秒计。

案例:

<template>
  <div id="app">
    <div class="demo"></div>
    <p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      
    } 
  },
  mounted() {
    
  },
  methods:{
    
  }
}
</script>

<style scoped>
.demo{
  width:100px;
  height:100px;
  background:blue;
  transition-property:width;
  transition-duration:5s;
  transition-delay:2s;
}

.demo:hover{
  width:300px;
}
</style>

若对您有帮助,请点击跳转到B站一键三连哦!感谢支持!

有关【面试题】CSS transition 属性全面详解的更多相关文章

  1. ruby-on-rails - 如果为空或不验证数值,则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初,我将所有3列的:default=>0放在表格中,但我不想要这样,因为它已经填充了字段,我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  2. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗? 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话,Rails使用#method_missing作为属性setter,因此您的模块将优先,阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost),那么您的实例方法需要进入一个特殊的模块:classBlah

  3. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法,但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  4. ruby - Nokogiri 剥离所有属性 - 2

    我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点? 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者,如果您需要做一些更复杂的事情,有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog

  5. ruby-on-rails - Rails 模型——非持久类成员或属性? - 2

    对于Rails模型,是否可以/建议让一个类的成员不持久保存到数据库中?我想将用户最后选择的类型存储在session变量中。由于我无法从我的模型中设置session变量,我想将值存储在一个“虚拟”类成员中,该成员只是将值传递回Controller。你能有这样的类(class)成员吗? 最佳答案 将非持久属性添加到Rails模型就像任何其他Ruby类一样:classUser扩展解释:在Ruby中,所有实例变量都是私有(private)的,不需要在赋值前定义。attr_accessor创建一个setter和getter方法:classUs

  6. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  7. Hive SQL 五大经典面试题 - 2

    目录第1题连续问题分析:解法:第2题分组问题分析:解法:第3题间隔连续问题分析:解法:第4题打折日期交叉问题分析:解法:第5题同时在线问题分析:解法:第1题连续问题如下数据为蚂蚁森林中用户领取的减少碳排放量iddtlowcarbon10012021-12-1212310022021-12-124510012021-12-134310012021-12-134510012021-12-132310022021-12-144510012021-12-1423010022021-12-154510012021-12-1523.......找出连续3天及以上减少碳排放量在100以上的用户分析:遇到这类

  8. ruby - Chef Ruby 遍历 .erb 模板文件中的属性 - 2

    所以这可能有点令人困惑,但请耐心等待。简而言之,我想遍历具有特定键值的所有属性,然后如果值不为空,则将它们插入到模板中。这是我的代码:属性:#===DefaultfileConfigurations#default['elasticsearch']['default']['ES_USER']=''default['elasticsearch']['default']['ES_GROUP']=''default['elasticsearch']['default']['ES_HEAP_SIZE']=''default['elasticsearch']['default']['MAX_OP

  9. ruby - 获取数组中的值并最小化某个类属性的最优雅的方法是什么? - 2

    假设我有以下类(class):classPersondefinitialize(name,age)@name=name@age=ageenddefget_agereturn@ageendend我有一组Person对象。是否有一种简洁的、类似于Ruby的方法来获取最小(或最大)年龄的人?如何根据它对它们进行排序? 最佳答案 这样做会:people_array.min_by(&:get_age)people_array.max_by(&:get_age)people_array.sort_by(&:get_age)

  10. ruby-on-rails - 为模型创建状态属性 - 2

    我想为我的Task模型创建一个status属性,该属性将按以下顺序指示它在三部分进度中的位置:打开=>进行中=>完成。它的工作方式类似于亚马逊包裹的交付方式:已订购=>已发货=>已交付。我想知道设置此属性的最佳方法是什么。我可能是错的,但创建三个独立的bool属性似乎有点多余。实现此目标的最佳方法是什么? 最佳答案 Rails4有一个内置的enummacro.它使用单个整数列并映射到键列表。classOrderenumstatus:[:ordered,:shipped,:delivered]end状态映射如下:{ordered:0,

随机推荐