不带旋转的CSS变换属性过渡

Question

不带旋转的CSS变换属性过渡

3

我需要对一个旋转的元素进行变换，我想要动画（使用过渡）对变换进行处理，但不想对旋转进行处理。

<html>

 <head>
   <link rel="stylesheet" href="style.css">
   <script src="script.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <style>
     .transF{
         transform:translate3d(150px, 100px, 0px) rotateZ(-50deg);
         transition : transform 3s linear;
      }
   </style>
   <script>
      var add = function(){
        $("#test").addClass("transF"); 
      }
      var remove = function(){
        $("#test").removeClass("transF"); 
      }
   </script>
 </head>

 <body>
    <button onclick="add()">Add</button>
    <button onclick="remove()">Remove</button>
    <div id="test">test</div>
 </body>

</html>

Plunkr link

- swahi-ems

2个回答

0

你可以将这个更改为那个。

<style>
  .transF
  {
  transform:translate3d(150px, 100px, 0px);
  transition : transform 3s linear;
  }
</style>

只需删除 rotateZ(-50deg)。

谢谢。

- Rivan Chandra

我需要旋转它，但不带动画。 - swahi-ems

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kukkuz · Accepted Answer

我认为你不能过渡一个特定的属性 - 而应该使用动画：

对 translate3d 进行动画处理
在动画进行时保留 rotateZ 的值

请参见下面的演示：

var add = function() {
  $("#test").addClass("transF");
}
var remove = function() {
  $("#test").removeClass("transF");
}

.transF {
  transform: translate3d(150px, 100px, 0px) rotateZ(-50deg);
  animation: translate 3s linear;
}
@keyframes translate {
  from {
    transform: translate3d(0px, 0px, 0px) rotateZ(-50deg);
  }
  to {
    transform: translate3d(150px, 100px, 0px) rotateZ(-50deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<button onclick="add()">Add</button>
<button onclick="remove()">Remove</button>
<div id="test">test</div>