transition动画效果初识（实例）

多个属性一起动画示例

<body>
    <p>盒子的多个属性一起动画: width, height, background-color, transform. 将光标悬停在盒子上查看动画。</p>
    <div class="box"></div>
</body>
.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition:width 2s, height 2s, 　　　　　　　　　　　　　　//默认简写方法transition: <property> <duration> <time-funtion> <delay>
        background-color 2s, -webkit-transform 2s;　　　　　　　　　　 //transform属性，定义位置改变
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    -webkit-transform:rotate(180deg);　　　　　　　　　　　　　　　　　　//transform: rotate （角度） 定义旋转
    transform:rotate(180deg);　　　　　　　　　　　　　　　　　　　　　　　　//transform属性同transition 一起可以实现很多常见的简单动画效果。
}

css transform 属性参考地址：http://www.w3school.com.cn/cssref/pr_transform.asp

 trasform要注意浏览器前缀。

检测过渡是否完成

 当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd. 详情查看页面底部的兼容性表格。 transitionend 事件提供两个属性:

propertyName字符串，指示已完成过渡的属性。

elapsedTime浮点数，指示当触发这个事件时过渡已运行的时间（秒）。这个值不受 transition-delay影响。

 可以用  element.addEventListener() 方法来监听这个事件：

 

el.addEventListener("transitionend", updateTransition, true);

 

高亮菜单过渡效果

 

<div class="sidebar">
  <p><a class="menuButton" href="home">Home</a></p>
  <p><a class="menuButton" href="about">About</a></p>
  <p><a class="menuButton" href="contact">Contact Us</a></p>
  <p><a class="menuButton" href="links">Links</a></p>
</div>
.menuButton {
  position: relative;
  transition-property: background-color, color; 　　　　　　　　　　　　　　　　　　　　　//transition设置需要的属性，当设置属性样式发生改变时会执行transition
  transition-duration: 1s;
  transition-timing-function: ease-out;
  text-align: left;
  background-color: grey;
  left: 5px;
  top: 5px;
  height: 26px;
  color: white;
  border-color: black;
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 2px 2px 1px black;
  padding: 2px 4px;
  border: solid 1px black;
}

.menuButton:hover {
  position: relative;
  transition-property: background-color, color;　　　　　　　　　　　　　　　　//改变后的元素再次设置一次，则鼠标离开的时候也会有相同的过渡效果
  transition-duration: 1s;
  transition-timing-function: ease-out;
  background-color:white;
  color:black;
  box-shadow: 2px 2px 1px black;
}

 

 

transition 让 JavaScript 效果更平滑

 transition 是非常好的工具，可以让 JavaScript 效果平滑而不用修改 JavaScript。

 

<p>随便点击某处来移动球</p>
<div id="foo"></div>
var f = document.getElementById('foo');
document.addEventListener('click', function(ev){　　　　　　　　　　　　　　　　//监听点击的位置
    f.style.left = (ev.clientX-25)+'px'; 　　　　　　　　　　　　　　　　　　　　//改变style属性中对应的位置
    f.style.top = (ev.clientY-25)+'px';　　　　　　　　　　　　　　　　　　　　　//-25则可以找到50px的小球的中点
},false);
p {
  padding-left: 60px;

#foo {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition:  all 1s; 　　　　　　　　　　　　　　　　　　　　//transition： all 1s    所有可能改变的属性1s过度
}

 

posted @ 2018-04-28 10:02  刁民阿准  阅读(317)  评论(0)  编辑  收藏  举报