zoukankan      html  css  js  c++  java
  • 触发transition的几种方式

    鼠标单击 获取焦点 或元素发生任何改变,怎么说呢,目前的理解是,元素发生了什么改变,使得它跟以前不一样了。比如同样是p元素,先有一个样式。后来这个p被hover了、被focus了。或者通过另外一条途径才能得到它。比如原来是<div><p></p></div> 获取div p就可以了。但是如果有个div.addclass p的css样式。这时给div加上addclass的类也可以触发transition。当然,transition设置在最初始的p中。

    现在有一个问题,如果给p加上一个类,类的css里面有对属性的更改,会触发么 ?闭着眼睛想想明天试一下(明天到了)

    试了一下,过度必须要有一个动态的触发(改变)过程

    
            div{
                 200px;
                height: 200px;
                border: 1px solid red;
                border-radius: 5px;
                padding: 20px;
            }
            p{
                 100px;
                height: 100px;
                /*border-radius: 5px;*/
                border: 1px solid black;
                -moz-transition:all 3s ease 1s;
    
            }
            .add{
                 50px;
                height: 50px;
    
            }
    
        <div><p class =‘add’></p></div> 
    //没有任何效果,同样,设置另外一个p的样式,同样没有过度,只是覆盖罢了。
    //如果改成add:hover{...} 或者js动态加入.add 就会使P有过度效果

     再总结一下吧,触发分为伪类触发 比如 :hover : focus  :checked  :active

                                   js触发就是toggleClass

    过度应该是这样的吧,就是对同一个元素(元素获取,或者类,ID获取都可以,针对同一个元素就行),有两个不同样式(两个途径获取的)。如果一开始这两个途径就可以获取该元素(第二个直接覆盖第一个),就没有过度。

    如果第二途径的实现依赖于某种改变才会获取该元素,就会有过度。

    途径1获取一个元素{

       //样式

    }

    途径2获取一个元素{ 

        //样式

    }

     对于这个例子的触发可以是 div:hover p{}     p:hover{}    或者动态加一个类,只要是使途径二可以获取到该元素都可以。

    至于别的例子中,觉得触发有固定的思路但是没有固定的形式,看着办吧,哈哈。感觉把自己都绕糊涂了。

  • 相关阅读:
    球员岁月齐祖辉煌,执教生涯尤胜当年
    UVM序列篇之一:新手上路
    *2-3-7-加入field_automation机制
    2.3.6-加入scoreboard
    *2_3_5_加入reference model
    *2.3.4_封装成agent
    *2.3.3-加入monitor
    android的wake_lock介绍
    linux常用命令一些解释
    linux wc命令的作用。
  • 原文地址:https://www.cnblogs.com/hellolm/p/4515963.html
Copyright © 2011-2022 走看看