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

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

  • 相关阅读:
    Redis源代码分析(十三)--- redis-benchmark性能測试
    kvm中运行kvm
    umount.nfs device busy day virsh extend diskSpace, attachDisk
    ultravnc
    openNebula dubug
    maintenance ShellScripts
    virsh VMI deploy data serial xml
    cloud computing platform,virtual authentication encryption
    基于C 的libvirt 接口调用
    storage theory
  • 原文地址:https://www.cnblogs.com/hellolm/p/4515963.html
Copyright © 2011-2022 走看看