CSSの移行
5567 ワード
要素の初期状態と最終状態を知っていると、この要素を初期から最終にしたいと思っています.例えば、divを赤から青に変えたいと思っていますが、そんなに硬く直接変えたくないので、移行を使用することができます. property遷移するCSS属性 を指定 duration指定遷移時間 timing-function速度曲線、例えば均一速度、先遅後速 delay遅延遷移効果の実行開始時間 以下のコードで、マウスを移動すると
transition: property duration timing-function delay;div要素が広くなり、アニメーションの効果があり、開始前にdivの幅を設定し、:hoverでその要素の幅を再定義し、開始と最終の状態があり、中間のアニメーション効果は、ブラウザー自身で処理します.
<meta charset="utf-8"/>
<style type="text/css">
.container{
width: 200px;
height: 200px;
background: skyblue;
transition: width 2s; /* ， */
}
.container:hover{
width: 400px;
}
</style>
<div class="container"/>
</code></pre>
<h4 id="transition-timing-function">transition-timing-function</h4>
<p> ， </p>
<ul>
<li>linear </li>
<li><p>ease ， ， </p></li>
<li>ease-in </li>
<li>ease-out </li>
<li>ease-in-out </li>
<li><p>cubic-bezier(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>) cubic-bezier 。 0 1 。</p></li>
</ul>
<p> CSS ， </p>
<pre><code>
<title/>
<meta charset="utf-8"/>
<style type="text/css">
.container{
width: 200px;
height: 200px;
background: skyblue;
transition: width 2s; /* ， */
transition-timing-function: cubic-bezier(0.95, -0.18, 0, 0.46);
}
.container:hover{
width: 400px;
}
</style>
<div class="container"/>
</code></pre>
<h4 id="transition-delay">transition-delay</h4>
<p> </p>
<pre><code>.container{
width: 200px;
height: 200px;
background: skyblue;
transition: width 2s cubic-bezier(0.95, -0.18, 0, 0.46) 1s;
}</code></pre>
<h3 id=" "> </h3>
<p> </p>
<pre><code>transition: width,height,background 2s,2s, 1s;</code></pre>
<p> </p>
<pre><code>transition-property: width,height,background;
transition-duration: 2s,2s, 1s;</code></pre>
<p> </p>
<pre><code>
<title/>
<meta charset="utf-8"/>
<style type="text/css">
.container{
width: 200px;
height: 200px;
background: skyblue;
transition: width,height,background 2s,2s, 1s;
}
.container:hover{
width: 400px;
height: 400px;
background: pink;
}
</style>
<div class="container"/>
</code></pre>
<h3 id=" "> </h3>
<p> ， ，CSS </p>
<p> js </p>
<p> ： </p>
<pre><code>.container-click{
width: 400px;
height: 400px;
background: pink;
}</code></pre>
<p> ： js ， div id， </p>
<pre><code>let num = 0;
let div = document.getElementById('div');
div.onclick = function(){
if(num === 0){
div.classList.add("container-click");
num = 1;
}else{
div.classList.remove("container-click");
num = 0;
}
}</code></pre>
<p> </p>
<pre><code>
<title/>
<meta charset="utf-8"/>
<style type="text/css">
.container{
width: 200px;
height: 200px;
background: skyblue;
transition-property: width,height,background;
transition-duration: 2s,2s, 1s;
}
.container-click{
width: 400px;
height: 400px;
background: pink;
}
</style>
<div class="container" id="div"/>
<script type="text/javascript">
let num = 0;
let div = document.getElementById('div');
div.onclick = function(){
if(num === 0){
div.classList.add("container-click");
num = 1;
}else{
div.classList.remove("container-click");
num = 0;
}
}
</script>
</code></pre>
</div>
</div>
</div>