当前位置：文江博客话题详情

使用 Javascript 激活 Webkit CSS3 动画

发布于 2024-09-05 07:19:27 字数 151 浏览 4 评论 0原文

我希望使用 Webkit CSS3 在按下按钮时通过更改其左右 CSS 属性，将绝对定位的 DIV 从屏幕上的一个位置移动到另一个位置。然而，我看到的所有执行此操作的示例都使用静态 CSS 规则来应用此转换。

我事先不知道新的位置，那么如何动态应用这个 CSS3 过渡呢？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

悍妇囚夫 2024-09-12 07:19:27

一旦定义了过渡，无论您如何更改元素上的 CSS 值，它都会应用。因此，您只需使用 JavaScript 应用内联样式，该元素就会产生动画效果。因此，使用这样的 CSS：

left: 100px;
top: 100px;
-webkit-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
-moz-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
-o-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;

有一个这样的函数：

function clickme() {
    var el = document.getElementById('mydiv');
    var left =  300;
    var top =  200;
    el.setAttribute("style","left: " + left + "px; top: " + top + "px;");
}

当您调用该函数时，您将看到动画。您可以从任意位置获取 left 和 top 的值。我已经完成了一个完整的示例。

Once you've defined the transition it will apply no matter how you change the CSS values on the element. So you can just apply an inline style with JavaScript and the element will animate. So with CSS like this:

left: 100px;
top: 100px;
-webkit-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
-moz-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
-o-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;

Have a function like this:

function clickme() {
    var el = document.getElementById('mydiv');
    var left =  300;
    var top =  200;
    el.setAttribute("style","left: " + left + "px; top: " + top + "px;");
}

And you will see the animation when you call the function. You can get the values for left and top from where ever you like. I've done a full example.

回复收藏 0 原文

与风相奔跑 2024-09-12 07:19:27

另一种选择是使用 jQuery Transit 向左或向右移动绝对定位的 div：

Javascript ：

$("#btnMoveRight").click( function () {
    $('#element').transition({ left: '+=50px' });
});

$("#btnMoveLeft").click( function () {
    $('#element').transition({ left: '-=50px' });
});

JS Fiddle 演示

它在移动设备上运行良好，并处理您的CSS3/浏览器兼容性适合您。

Another option would be to use jQuery Transit to move the absolutely positioned div left or right:

Javascript:

$("#btnMoveRight").click( function () {
    $('#element').transition({ left: '+=50px' });
});

$("#btnMoveLeft").click( function () {
    $('#element').transition({ left: '-=50px' });
});

JS Fiddle Demo

It works well on mobile devices and handles your CSS3/browser compatibilities for you.

回复收藏 0 原文

~没有更多了~