微信小程序界面设计小程序中CSS3样式精通课程-transition过渡-transition-delay

逃离我推掉我的手 2024-02-19 16:19 51阅读 0赞

### transition过渡-transition-delay ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

通用语法  
浏览器支持  
![在这里插入图片描述][20190122161900725.png]  
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-delay 属性。  
Safari 支持替代的 -webkit-transition-delay 属性。  
注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition-delay 属性。  
定义和用法  
transition-delay 属性规定过渡效果何时开始。  
transition-delay 值以秒或毫秒计。  
默认值： 0  
继承性： no  
版本： CSS3  
JavaScript 语法： object.style.transitionDelay=“2s”  
语法

transition-delay: time;

值  
值 描述  
time 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。  
实例  
在过渡效果开始前等待 2 秒：

<!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:blue;
    transition-property:width;
    transition-duration:5s;
    transition-delay:2s;
    
    /* Firefox 4 */
    -moz-transition-property:width; 
    -moz-transition-duration:5s;
    -moz-transition-delay:2s;
    
    /* Safari and Chrome */
    -webkit-transition-property:width; 
    -webkit-transition-duration:5s;
    -webkit-transition-delay:2s;
    
    /* Opera */
    -o-transition-property:width;
    -o-transition-duration:5s;
    -o-transition-delay:2s;
    }
    
    div:hover
    {
    width:300px;
    }
    </style>
    </head>
    <body>
    
    <div></div>
    
    <p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
    
    <p><b>注释：</b>过渡效果会在开始前等待两秒钟。</p>
    
    <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
    
    </body>
    </html>

效果图  
![在这里插入图片描述][20190122162010236.png]

### 小程序应用 ###

防采集标记：黄菊华老师的课程和资料

> Wxml代码

<view class='c01'>
    01
    </view>
    
    <view>请把鼠标指针移动到蓝色的元素上，就可以看到过渡效果。</view>
    <view>注释：过渡效果会在开始前等待两秒钟。</view>

> Wxss代码

.c01{
      width:100px;
      height:100px;
      background:blue;
      transition-property:width;
      transition-duration:5s;
      transition-delay:2s;
    }
    .c01:hover{
      width:300px;
    }

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]

[欢迎大家学习我的视频课程：微信小程序界面设计-小程序中CSS3样式精通课程][-_CSS3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70 1]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[20190122161900725.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e0a2961df3864298914bc66f3ace3fb7.png
[20190122162010236.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0ab64065d643440987138f199a8256af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f8149a19c1844f7d967ac4afb813df03.png
[-_CSS3]: https://ke.qq.com/course/371155?tuin=2b10d56
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5af509fe008d4195ab7ed638da6b2259.png