触发transition的几种方式

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

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

试了一下，过度必须要有一个动态的触发（改变）过程

        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            border-radius: 5px;
            padding: 20px;
        }
        p{
            width: 100px;
            height: 100px;
            /*border-radius: 5px;*/
            border: 1px solid black;
            -moz-transition:all 3s ease 1s;

        }
        .add{
            width: 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{}    或者动态加一个类，只要是使途径二可以获取到该元素都可以。

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

 

转载于:https://www.cnblogs.com/hellolm/p/4515963.html